.loyl-landingpage--desktop {
    @media (max-width: 959px) {
        display: none !important;
    }
}

.loyl-landingpage--mobile {
    @media (min-width: 960px) {
        display: none !important;
    }
}

.loyl-landingpage--hero-section {
    width: 100%;
    max-height: 724px;
    min-height: 303px;
    aspect-ratio: 16 / 9;
    display: grid;
    place-items: center;
    overflow: hidden;
    position: relative;

    /* Break out of the padded shop-content container to achieve full-width on mobile.
       margin-left shifts the element left by the difference between viewport and container width. */
    @media (max-width: 959px) {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
    }

    .loyl-landingpage--hero-section-background-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        position: absolute;
    }

    /* Content Layer */
    .loyl-landingpage--hero-section-content {
        display: grid;
        grid-area: 1 / 1;
        place-items: center;
        text-align: center;
        max-width: 760px;
        color: white;
        z-index: 1;

        .loyl-landingpage--hero-section-heading {
            @media (min-width: 960px) {
                max-width: 405px;
            }
            @media (max-width: 959px) {
                max-width: 160px;
            }
        }

        .bdk-heading-2xl {
            text-transform: none;
        }
    }
}

.loyl-landingpage--level-overview-section {
    display: grid;
    place-items: center;
    text-align: center;

    @media (max-width: 959px) {
        text-align: start;
        margin-top: var(--bdk-space-10, 6.666667rem);
    }

    @media (min-width: 960px) {
        margin-top: var(--bdk-space-22, 14.666667rem);
    }


    .loyl-landingpage--level-overview-subtitle {
        max-width: 772px;
    }

    .loyl-landingpage--level-overview-card-list {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--bdk-space-3, 2rem);
        margin-top: var(--bdk-space-8, 5.333333rem);
        width: 100%;

        @media (min-width: 960px) {
            grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        }

        .loyl-landingpage--level-overview-card {
            text-align: start;
            padding: var(--bdk-space-7, 4.666667rem) var(--bdk-space-5, 3.333333rem) var(--bdk-space-11, 7.333333rem);
            border-radius: 8px;

            @media (max-width: 959px) {
                cursor: pointer;
            }

            &:focus-visible {
                outline: 2px solid white;
                outline-offset: -5px;
            }

            &.expanded ul {
                display: block;
            }

            &.expanded .loyl-landingpage--level-overview-card-teaser {
                display: none;
            }

            &.expanded svg {
                transform: rotate(180deg);
            }

            .loyl-landingpage--level-overview-card-header {
                display: flex;
                justify-content: space-between;
                align-items: center;

            }

            .loyl-landingpage--level-overview-card-teaser {
                @media (min-width: 960px) {
                    display: none;
                }

                @media (max-width: 959px) {
                    display: block;
                }
            }

            ul {
                list-style-type: disc;
                margin-top: var(--bdk-space-3, 2rem);
                margin-left: var(--bdk-space-5, 3.333333rem);

                @media (min-width: 960px) {
                    display: block;
                }

                @media (max-width: 959px) {
                    display: none;
                }

                li {
                    margin-top: var(--bdk-space-2, 1.333333rem);
                }
            }
        }
    }
}