#hero img {
    object-position: top left;
}

@media screen and (max-width: 749px) {
    :root {
        --header-height: 3rem;
    }

    #hero h1 {
        font-size: var(--fs-4xl);
    }
}

#faq {
    z-index: 2;
    overflow: visible;
}

#faq .shapes-container {
    position: relative;
    display: grid;
    z-index: 1;
    justify-content: center;
    align-items: flex-start;
    height: 100%;   
    width: 100%;
}

#faq .shapes-container .trixie-shape[shape-name="flower-1"] .trixie-shape__text {
    padding: var(--spacing-2xl);
    font-family: var(--font-body);
    font-weight: var(--fw-body);
    line-height: 1;
    color: var(--trixie-text-light);
}

@media screen and (min-width: 750px) {
    #faq .shapes-container {
        height: auto;
    }

    #faq .shapes-container .trixie-shape[shape-name="flower-1"] {
        position: relative;
        margin-top: -30%;
        --shape-offset-y: -0;
        --shape-offset-x: -0;
    }

    #faq .shapes-container .trixie-shape[shape-name="flower-1"] .trixie-shape__text {
        font-size: var(--fs-2xl);
    }

    #faq .shapes-container .trixie-shape[shape-name="flower-3"] {
        z-index: 2;
        top: 40%;
        right: 47%;
        transform: unset;
    }

    #faq .shapes-container .trixie-shape[shape-name="flower-3"] .trixie-shape__text {
        font-size: var(--fs-4xl);
        padding: 0.75em !important;
    }
}

@media screen and (max-width: 749px) {   
    #faq .shapes-container {
        min-height: 250px;
    }

    #faq .shapes-container .trixie-shape[shape-name="flower-1"] {
        --shape-offset-y: -0.2;
        --shape-offset-x: 0.1;
    }

    #faq .shapes-container .trixie-shape[shape-name="flower-1"] .trixie-shape__text {
        font-size: var(--fs-xl);
        padding: 2.5em;
    }

    #faq .shapes-container .trixie-shape[shape-name="flower-3"] {
        --shape-offset-y: 0.4;
        --shape-offset-x: 0.6;
        z-index: 2;
    }

    #faq .shapes-container .trixie-shape[shape-name="flower-3"] .trixie-shape__text {
        font-size: var(--fs-5xl) !important;
        padding: 0.5em !important;
        transform: scale(1.4) rotate(7deg);
    }

    #faq .trixie-shape:first-child svg {
        width: 150px;
    }

    #faq .trixie-shape:last-child svg {
        width: 200px;
    }
}

/* –––––––––––––––––––––––––––––– SOCIALS ––––––––––––––––––––––––––––––––– */

#socials .masked-image-wrapper .trixie-shape {
    --shape-offset-y: 0.1;
    --shape-offset-x: 0.2;
    z-index: 3;
}

#socials .masked-image-wrapper .trixie-shape .trixie-shape__text {
    font-weight: var(--fw-body);
    padding: 0.7em;
}

#socials .masked-image-wrapper .background-shape .object {
    fill: var(--trixie-pink);
}

#socials .socials-icons .object {
    fill: var(--trixie-pink);
}

#socials .masked-image {
    --t: calc(1 - var(--p-ratio));
    --p-eased: calc(1 - var(--t) * var(--t) * var(--t));
    transform: translateY(max(calc(100% - var(--p-eased) * 25% - 75%), 0%)) scale(1.5);
    transform-origin: bottom center;
}

@media screen and (min-width: 750px) {
    #socials .masked-image-container {
        transform: scale(1.3) translateY(-10%);
        transform-origin: center;
    }

    #socials .masked-image {

    }
}

@media screen and (max-width: 749px) {
    #socials .container {
        justify-content: center;
        justify-items: center;
        text-align: center;
    }

    #socials .f-heading {
        justify-content: center;
    }

    #socials .masked-image-container {
        transform: scale(1.25);
        transform-origin: center;
    }

    #socials .masked-image-wrapper {
        margin-top: calc(var(--spacing-xs) * -1);
        width: 100%;
        height: 250px;
    }

    #socials .socials-icons {
        justify-content: center;
        justify-items: center;
    }

    #socials .masked-image-wrapper .trixie-shape {
        --shape-offset-y: 0.4;
        --shape-offset-x: 0;
    }

    #socials .masked-image-wrapper .trixie-shape .trixie-shape__text {
        font-size: var(--fs-xl);
    }
}

@media screen and (max-width: 349px) {
    #socials .masked-image-wrapper .trixie-shape {
        transform: scale(0.8) rotate(-15deg) !important;
    }
}