.hero .green-backdrop {
    background-color: rgb(136, 143, 112);
}

.hero .illustration {
    padding: 0px 40px;
    aspect-ratio: 3/2;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.hero .illustration #backdrop {
    background-color: white;
    transform: skewX(15deg);
    width: 100%;
    height: 100%;
    grid-area: 1 / 1;
}

.hero .illustration #photos {
    --shift: 25px;

    margin: 2%;
    padding-bottom: var(--shift);
    grid-area: 1 / 1;
    justify-content: center;
    display: flex;
}

.hero .illustration #photos :nth-child(even) {
    transform: translate(calc(-1 * var(--shift) * tan(var(--skew))), var(--shift))
}

.hero .illustration .slab {
    --skew: 15deg;

    position: relative;
    width: 100%;
    height: 100%;
    container: slab / size;
    margin: 0 -22px;
}

@container slab (height > 0px) {
    .hero .illustration .photo, .hero .illustration .slab::before {
        --width: 100cqw; /* note: this must be an absolute value for correct clip-path calculation */
        --height: 100cqh; /* note: this must be an absolute value for correct clip-path calculation */
    }
}

.hero .illustration .photo, .hero .illustration .slab::before {
    --extra_thickness: 0px;

    clip-path: polygon(
        calc(var(--height) * tan(var(--skew))) 0,
        calc(var(--width) + 2*var(--extra_thickness)) 0,
        calc(var(--width) - var(--height) * tan(var(--skew)) + 2 * var(--extra_thickness)) 100%,
        0 calc(var(--height) + 2*var(--extra_thickness))

    );
}

.hero .illustration .photo {
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.hero .illustration .slab::before {
    --extra_thickness: 3px;

    content: "";
    position: absolute;
    left: calc(-1 * var(--extra_thickness));
    top: calc(-1 * var(--extra_thickness));
    width: calc(var(--width) + 2*var(--extra_thickness));
    height: calc(var(--height) + 2*var(--extra_thickness));
    background-color: white;
}

.titlebox {
    grid-area: 1 / 2;
    color: rgb(249, 245, 240);
    border: 16px solid transparent;
    box-sizing: border-box;
}

.titlebox .title {
    font-size: 1.5em;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 0.9;
}

.titlebox .subtitle {
    font-size: 1em;
}

.follow-on {
    display: flex;
    align-items: center;
    gap: 4px;
    color: white;
    font-size: 1em;
    font-weight: 300;
}
.follow-on .media {
    height: 1.5em;
    aspect-ratio: 1;
    background-size: contain;
}

.hero .contact-me {
    background-color: rgb(249, 245, 240);
    border-radius: 1em;
    font-weight: 300;
    padding: 0 12px;
    font-size: 1em;
    margin: 8px;
    display: flex;
}
.contact-me .media {
    height: 1.5em;
    aspect-ratio: 1;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
    margin-left: 4px;
}

.media.instagram {
    background-image: url('../img/instagram.webp');
}
.media.linkedin {
    background-image: url('../img/linkedin.svg');
}
.media.whatsapp {
    background-image: url('../img/whatsapp.svg');
}
.media.email {
    background-image: url('../img/mail.svg');
}