#hero.sale-page-hero .hero--slide {
    height: clamp(
        400px,
        calc(400px + (800 - 400) * (100vw - 395px) / (1920 - 395)),
        800px
    ) !important;
}

#hero.sale-page-hero .hero--wave {
    background: var(--hero-bottom-texture) center no-repeat;
    background-size: cover;
}

#hero.sale-page-hero .hero--caption {
    top: 50% !important;
}

.sale-page-main-content {
    background-image: var(--main-content-background-image, none);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    margin-top: -200px;
    padding-top: 250px;

    @media all and (max-width: 1024px) {
        margin-top: -150px;
        padding-top: 200px;
    }
    @media all and (max-width: 768px) {
        margin-top: -100px;
        padding-top: 150px;
    }
    @media all and (max-width: 540px) {
        margin-top: -50px;
        padding-top: 100px;
        background-position: 70% top;
    }
}

.sale-page-main-content .sale-page-main-content__text {
    padding: 50px 0;
    max-width: 1270px;
    margin: auto;

    @media all and (max-width: 1240px) {
        padding: 38px 0;
    }

    @media all and (max-width: 640px) {
        padding: 25px 0;
    }
}

.sale-page-header {
    font-size: clamp(
        35px,
        calc(35px + (59 - 35) * (100vw - 395px) / (1920 - 395)),
        59px
    );
    line-height: clamp(
        40px,
        calc(40px + (64 - 40) * (100vw - 395px) / (1920 - 395)),
        64px
    );
    color: #ea2682;
    font-weight: 400;
    font-family: "Goblin One";
    text-transform: unset;
}

.sale-page-sub-header {
    font-size: clamp(
        32px,
        calc(32px + (57 - 32) * (100vw - 395px) / (1920 - 395)),
        57px
    );
    line-height: clamp(
        40px,
        calc(40px + (64 - 40) * (100vw - 395px) / (1920 - 395)),
        64px
    );
    color: #92278f;
    font-weight: 700;
    font-family: "Archivo Narrow";
    text-transform: unset;
}

.sale-page-paragraph {
    font-size: clamp(
        18px,
        calc(18px + (28 - 18) * (100vw - 395px) / (1920 - 395)),
        28px
    );
    line-height: clamp(
        23px,
        calc(23px + (33 - 23) * (100vw - 395px) / (1920 - 395)),
        33px
    );
    color: #212121;
    font-weight: 400;
    font-family: "Archivo Narrow";
}

.sale-page-small-sub-header {
    font-size: clamp(
        25px,
        calc(25px + (45 - 25) * (100vw - 395px) / (1920 - 395)),
        45px
    );
    line-height: clamp(
        34px,
        calc(34px + (64 - 34) * (100vw - 395px) / (1920 - 395)),
        64px
    );
    color: #92278f;
    font-weight: 700;
    font-family: "Archivo Narrow";
}

.theme-space-0 {
    margin-bottom: 0rem;
}
.theme-space-1 {
    margin-bottom: 1rem;

    @media all and (max-width: 1240px) {
        margin-bottom: calc(1rem / 1.5);
    }

    @media all and (max-width: 640px) {
        margin-bottom: calc(1rem / 2);
    }
}
.theme-space-2 {
    margin-bottom: 2rem;

    @media all and (max-width: 1240px) {
        margin-bottom: calc(2rem / 1.5);
    }

    @media all and (max-width: 640px) {
        margin-bottom: calc(2rem / 2);
    }
}
.theme-space-3 {
    margin-bottom: 3rem;

    @media all and (max-width: 1240px) {
        margin-bottom: calc(3rem / 1.5);
    }

    @media all and (max-width: 640px) {
        margin-bottom: calc(3rem / 2);
    }
}
.theme-space-4 {
    margin-bottom: 4rem;

    @media all and (max-width: 1240px) {
        margin-bottom: calc(4rem / 1.5);
    }

    @media all and (max-width: 640px) {
        margin-bottom: calc(4rem / 2);
    }
}
.theme-space-5 {
    margin-bottom: 5rem;

    @media all and (max-width: 1240px) {
        margin-bottom: calc(5rem / 1.5);
    }

    @media all and (max-width: 640px) {
        margin-bottom: calc(5rem / 2);
    }
}

.youtube-video-shortcode {
    text-align: center;
}
.youtube-video-shortcode iframe {
    max-width: 730px;
    width: 100%;
    height: auto;
    aspect-ratio: 1.7 / 1;
}

.sale-page-small-paragraph {
    font-size: clamp(
        16px,
        calc(16px + (20 - 16) * (100vw - 395px) / (1920 - 395)),
        20px
    );
    line-height: clamp(
        22px,
        calc(22px + (26 - 22) * (100vw - 395px) / (1920 - 395)),
        26px
    );
    color: #212121;
    font-weight: 400;
    font-family: "Archivo Narrow";
}