@layer pages {
    .promotion__banner {
        position: relative;
        display: flex;
        align-items: center;
        aspect-ratio: 13 / 3;
        overflow: hidden;
        border-radius: var(--radius);

        @media (max-width: 64rem) {
            aspect-ratio: 3 / 1;
        }

        @media (max-width: 48rem) {
            aspect-ratio: 16 / 9;
            align-items: flex-start;
            padding-block: var(--space-3);
        }
    }

    .promotion__hero {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
    }

    .promotion__title {
        position: relative;
        max-width: 60%;
        padding-inline: var(--space-5);

        @media (max-width: 64rem) {
            max-width: 55%;
        }

        @media (max-width: 48rem) {
            max-width: 65%;
            padding-inline: var(--space-3);
            font-size: var(--text-h3);
        }
    }

    .faq {
        margin-top: 90px;

        display: flex;
        flex-direction: column;
        gap: var(--space-5);

        @media (max-width: 48rem) {
            margin-top: var(--space-5);
            gap: var(--space-4);
        }
    }
}