/* Section 4 — Numbers / social profiles */
.section-4 {
    position: relative;
    z-index: 20;
    background: #000;
    aspect-ratio: 813 / 512; /* keeps the artboard proportions at any screen size */
    display: grid;
    grid-template-columns: 1fr 1.02fr 1fr;
    overflow: hidden;
    color: #fff;
}

.s4-col {
    position: relative;
    overflow: hidden; /* masks the slide-in animations */
    height: 100%;
}

.s4-text {
    position: absolute;
    left: 0;
    right: 0;
    padding: 0 6%;
    font-family: 'Bebas Neue', sans-serif;
    text-transform: uppercase;
    color: #fff;
}
.s4-text h3 {
    font-weight: 400;
    font-size: 4.9vw;
    white-space: nowrap;
    line-height: 0.95;
    letter-spacing: 0.005em;
    margin-bottom: 0.45em;
}
.s4-text p {
    font-size: 2vw;
    white-space: nowrap;
    line-height: 1.15;
    letter-spacing: 0.04em;
}
.s4-text .line { display: block; }

/* left: text on top, instagram bleeding off the bottom */
.s4-left .s4-text { top: 5%; }
.s4-ig {
    position: absolute;
    left: 3%;
    width: 94%;
    top: 34.5%;
    display: block;
}

/* center photo */
.s4-center img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* right: tiktok at the top, text below */
.s4-tk {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 58%;
    object-fit: cover;
    object-position: top;
    border-radius: 0 0 16px 16px;
    display: block;
}
.s4-right .s4-text { top: 64%; }

@media (max-width: 900px) {
    .section-4 {
        height: auto;
        aspect-ratio: auto;
        grid-template-columns: 1fr;
        grid-template-areas: 'center' 'left' 'right';
        padding-bottom: 40px;
    }
    .s4-center { grid-area: center; height: 90vw; }
    .s4-left { grid-area: left; height: auto; }
    .s4-right { grid-area: right; height: auto; }
    .s4-left, .s4-right { display: flex; flex-direction: column; padding: 30px 5vw 0; }
    .s4-left .s4-text, .s4-right .s4-text { position: static; padding: 0 0 20px; order: -1; }
    .s4-right .s4-text { order: 2; padding: 20px 0 0; }
    .s4-ig, .s4-tk { position: static; width: 100%; height: auto; border-radius: 16px; }
    .s4-text h3 { font-size: 13vw; }
    .s4-text p { font-size: 5.5vw; }
}