.hero {
display: grid;
grid-template-columns: 1fr 1fr;
height: 70vh;
}
.portfolio-hero{padding-top:3rem;padding-bottom:1rem}.portfolio-hero__label{margin-bottom:.65rem;color:rgba(0,0,0,.5);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase}.portfolio-hero h1{color:#292925;font-size:2rem;line-height:1.3;letter-spacing:-.035em}.portfolio-hero__slogan{display:flex;align-items:center;gap:.5rem;margin-top:.65rem;color:#292925;font-size:1.2rem}.portfolio-hero__slogan img{width:1.9rem;height:auto}.selected-cases .edt-case-heading h2{color:#292925;font-size:2rem;line-height:1.3;letter-spacing:-.035em;text-transform:none}.selected-cases__subtitle{display:flex;align-items:center;gap:.5rem;margin-top:.65rem;font-size:1.2rem}.selected-cases__subtitle img{width:1.9rem;height:auto}.about>div>h2{color:rgba(0,0,0,.5);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.65rem}.about>div>h3{margin-bottom:2rem}.about>div>.btn-cta{display:inline-block;margin-top:2rem}
.hero .mask {
mask-size: 35vw;
position: absolute;
transform: translate(50%, -50%);
right: 15vw;
top: 50%;
}
.about {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 3rem;
}
.about > div:last-child {
display: flex;
justify-content: center;
align-items:center;
}
.team {
display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));
gap:.5rem;
width:100%;
max-width:44rem;
align-items:start;
}
.team .mask {
grid-column:span 2;
width:100%;
mask-size:100% 100%;
position: relative;
}
.team .mask:nth-child(4){grid-column:2/span 2;transform:translateY(-21%)}.team .mask:nth-child(5){grid-column:4/span 2;transform:translateY(-21%)}.team>p{grid-column:1/-1}@media only screen and (min-width:901px){.team{transform:translateY(10.5%)}}
.team .mask > img {
width: 100%;
aspect-ratio: 16 / 18;
object-fit: cover;
}
.hero > div {
display: flex;
flex-direction: column;
justify-content: center;
}
.hero .mask  img {
width: 35vw;
height: 40vw;
object-fit: cover;
}
.mask:hover .overlay {
opacity: 1;
cursor: pointer;
}
.overlay {
position: absolute;
background-color: var(--overlay-color);
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: 0;
display: flex;
justify-content: center;
align-items: center;
transition: .5s;
}
.overlay > img {
width: 3rem;
rotate: -30deg;
}
.scroll {
margin-top: 4rem;
color: black;
text-decoration: none;
}
.scroll div {
display: flex;
align-items: center;
position: relative;
}
.scroll > div > .hexa {
width: 2rem;
}
.scroll .arrow {
transform: rotate(90deg) translate(-50%, 100%);
position: absolute;
top: 5px;
left: 1rem;
animation: bounce 2s infinite;
}
@keyframes bounce {
0% {
top: 5px; /* Startpositie */
}
50% {
top: 20px; /* Neerwaartse beweging */
}
100% {
top: 5px; /* Terug naar startpositie */
}
}
.scroll span {
margin-left: .5rem;
}
h3 {
font-size: 2rem;
}
.process { padding-top: 4rem; padding-bottom: 6rem; }
.process-heading { margin-bottom: 3rem; }
.process-label { color: rgba(0, 0, 0, .5); font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .65rem; }
.process-heading h2 { color: #292925; font-size: 2rem; line-height: 1.3; letter-spacing: -.035em; text-transform: none; }
.process-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2rem; list-style: none; margin: 0; padding: 0; }
.process-step { min-width: 0; }
.process-number { display: grid; place-items: center; width: 3.5rem; height: 4rem; margin-bottom: 1.5rem; background: url('../media/btn-hexagon.svg') center / contain no-repeat; color: var(--secondary-color); font-size: 1.5rem; }
.process-step h3 { color: #292925; font-size: 1.15rem; line-height: 1.45; margin-bottom: .65rem; }
.process-step p { font-size: .9rem; line-height: 1.8; color: #62625a; }
@media (max-width: 1050px) {
.process-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 2rem; }
}
@media (max-width: 700px) {
.process { padding-top: 3rem; padding-bottom: 4rem; }
.process-heading { margin-bottom: 2rem; }
.process-heading h2 { font-size: 1.7rem; }
.process-steps { grid-template-columns: 1fr; gap: 2rem; }
.process-step { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.process-number { width: 3rem; height: 3.5rem; margin: 0; font-size: 1.25rem; }
.process-step h3 { margin-bottom: .3rem; }
}
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 2rem
}
.wrapper .case:nth-child(2n) {
margin-top: 3rem;
}
.case .mask {
width: 100%;
mask-size: 100%;
}
.case > .mask >  img {
width: 100%;
aspect-ratio: 6 / 7;
object-fit: cover;
}
.case h3 {
font-size: 1.3rem;
}
@media only screen and (max-width: 900px) {
.hero {
grid-template-columns: 1fr;
height: unset;
}
.hero > div:last-child {
display: flex;
align-items: center;
}
.hero .mask {
position: relative;
top: 0;
right: 0;
transform: translate(0);
margin-top: 3rem;
mask-size: 50vw;
}
.hero .mask img {
width: 50vw;
height: 55vw;
}
.wrapper {
grid-template-columns: repeat(3, 1fr);
}
.wrapper .case:last-child {
display: none;
}
.about {
grid-template-columns: 1fr;
}
}
@media only screen and (max-width:720px){.selected-cases{padding-bottom:1rem}.selected-cases+br,.selected-cases+br+br{display:none}.selected-cases~.about{padding-top:1rem}}
@media only screen and (max-width: 500px) {
.portfolio-hero h1{font-size:1.7rem}.selected-cases .edt-case-heading h2{font-size:1.7rem}
.hero .mask {
mask-size: calc(100vw - 2rem);
}
.hero .mask img {
width: calc(100vw - 2rem);
height: 100vw;
}
h3 {
font-size: 1.5rem;
}
.wrapper {
grid-template-columns: 1fr;
}
.wrapper .case:last-child {
display: unset;
}
}