.gallery {
max-width:1200px;
display:grid;
grid-template-columns:33% 33% 33%;
margin-left:auto;
margin-right:auto;

}
.pracownik {
margin:3rem;
position:relative;
overflow:hidden;
}
.pracownik * {
cursor:pointer;
}
.pracownik-img {
height:100%;
}
.pracownik-img img {
width:100%;
height:100%;
object-fit:cover;
}
.pracownik-name {
background-color: transparent;
color:transparent;
padding: 1rem;
font-size: 1.5rem;
text-align: center;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.pracownik-name .title {
font-size:2rem;
}
.pracownik a:hover .pracownik-name {
background-color: RGBA(255,255,255,0.5);
color: #000;
}

.pracownik-pojedynczy {
position:fixed;
width:100%;
height:100%;
z-index:120;
top:0;
left:0;
background:RGBA(255,255,255,0.6);
display:none;
backdrop-filter: blur(5px);
}

.pracownik-pojedynczy > div {
display:flex;
flex-direction:column;
align-items:center;
justify-content:space-around;
height:100%;

}

.pracownik-pojedynczy-opis {
display:grid;
grid-template-columns:30% 70%;
align-items:center;
justify-content:center;
max-width:1000px;
position:relative;
}

.pracownik-pojedynczy-opis .pracownik-photo div {
width:100%;
padding-bottom:100%;
background-position:50% 50% !important;
background-size:cover !important;
}

.pracownik-pojedynczy-opis .pracownik-opis {
height:100%;
padding:3rem;
background:#E5E5E5;
position:relative;
}

a.pracownik-close svg {
height:3rem;
cursor:pointer;
}

a.pracownik-close:hover svg {
stroke:var(--dark-brown);
fill:var(--dark-brown);
}
.pracownik-pojedynczy-opis  .pracownik-photo img {
width:100%;
}
.pracownik-pojedynczy-opis .pracownik-opis svg {
stroke:var(--dark-brown);
fill:var(--dark-brown);
width:70%;
}

.tail {
stroke-dasharray: 7 5;
stroke-width:1.5;
}


.pracownik-pojedynczy-opis .pracownik-opis h1 {
font-family:'Heuristica';
font-size:1.4rem;
//text-transform:uppercase;
width:50%;
position:absolute;
top:4rem;
left:3rem;
}

.pracownik-pojedynczy-opis .pracownik-opis p {
font-size:0.8rem;
letter-spacing:1px;
margin-top: 2rem;
width: 90%;
}

.pracownik-pojedynczy-opis a {
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
position:absolute;
width:5rem;
height:100%;
top:0;
}

.pracownik-pojedynczy-opis a.prev {
left:0;
color:#fff;
}
.pracownik-pojedynczy-opis a.next {
right:0;
}
.pracownik-pojedynczy-opis a:hover {
color:var(--dark-brown);
}

.pracownik-pojedynczy-opis i:before {
font-size:3rem;
display:flex;
align-items:center;
justify-content:center;
}



@media (max-width:949px) {

.gallery {
grid-template-columns:100%;
}

.pracownik {
margin:2rem;
}
.pracownik-name {
font-size:1.2rem;
}
.pracownik-pojedynczy {
border:1.5rem solid var(--dark-brown);
overflow-y:scroll;
background:var(--bg);
}

.pracownik-pojedynczy-opis {
display:flex;
flex-direction:column;
}
.pracownik-pojedynczy-opis .pracownik-opis {
border:none;
background:none;
padding:0 2rem;
}
.pracownik-pojedynczy-opis .pracownik-photo {
}

.pracownik-pojedynczy-opis .prev {
display:none;
}

.pracownik-pojedynczy-opis .next {
display:none;
}

.pracownik-pojedynczy > div {
display:block;
}

div.pracownik-close {
display: block;
padding: 0;
position:sticky;;
top:1rem;
right:1rem;
z-index:130;
}
div.pracownik-close a {
position:absolute;
top:0;
right:1rem;
}
div.pracownik-close a:before {
content:"×";
color:var(--dark-brown);
border:3px solid var(--dark-brown);
border-radius:10rem;
background-color:#fff;
background-color:RGBA(255,255,255,0.75);
width:3rem;
height:3rem;
font-size:3rem;
display:flex;
justify-content:center;
align-items:center;
}
div.pracownik-close svg {
display:none;
}

.pracownik-pojedynczy span {
display:none;
}

.pracownik-pojedynczy .pracownik-photo img {
width:100%;
}

.pracownik-pojedynczy-opis {
width:100%;
}


.pracownik-pojedynczy-opis .pracownik-photo img {
width:100%;
}

.pracownik-pojedynczy-opis .pracownik-opis h1 {
position:unset;
margin-top:0;
}

.pracownik-pojedynczy-opis .pracownik-opis svg {
position: absolute;
top: 0;
left: 0;
width: calc(100vw - 4rem);
opacity: 0.5;
}

.pracownik-pojedynczy-opis .pracownik-opis p {
text-align:left;
font-size: 1.25rem;
}

.pracownik-pojedynczy-opis .pracownik-photo {
padding:2rem;
}

.pracownik-pojedynczy-opis i:before {
font-size:1.25rem;
width:2rem;
height:2rem;
border:none;
padding:1rem;
}

.pracownik-pojedynczy-opis i {
position:fixed;
top:3rem;
z-index:200;
}

.pracownik-pojedynczy-opis .next i {
right:4rem;
}
.pracownik-pojedynczy-opis .prev i {
left:4rem;
}

}