.banner-store-locator {
    background-color: var(--Others-Background-light);

    & .banner-store-locator-wrapper {
        gap: 12px;
        display: flex;
        flex-direction: column;

        background-color: var(--Primary-Pop-yellow);

        border-bottom-right-radius: 30px;
        border-bottom-left-radius: 30px;

        overflow: hidden;

        @media (max-width: 989px) { 
            gap: 10px;
        
            border-bottom-right-radius: 24px;
            border-bottom-left-radius: 24px;
        }
    }

    & .banner-store-locator-slider {
        isolation: isolate;

        position: relative;

        height: 220px;

        @media (max-width: 989px) { height: 126px; }

        & > .banner-store-locator-assets {
            position: absolute;
            inset: 0;

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

            & > .banner-store-locator-asset {
                position: absolute;

                & > img {
                    width: 100%;
                    height: 100%;

                    object-fit: contain;
                }

                &:nth-child(1) {
                    width: 120px;

                    top: 0;
                    left: 43px;

                    z-index: -1;
                }
                &:nth-child(2) {
                    width: 85px;

                    top: -28px;
                    right: 195px;

                    z-index: 1;
                }
                &:nth-child(3) {
                    width: 85px;

                    top: -13px;
                    right: 53px;
                }
            }
        }

        & > .banner-store-locator-slider-wrapper {
            --gap: -25px;

            position: absolute;
            top: 0;
            left: 50%;

            translate: -50% 0;

            width: calc(100% + 105px);
            height: calc(100% + 215px);

            @media (max-width: 989px) {
                --gap: -13px;

                width: calc(100% + 219px);
                height: calc(100% + 96px);
            }

            & > .banner-store-locator-slider-item {
                position: absolute;

                width: 243px;
                height: 303px;

                @media (max-width: 989px) {
                    width: 124px;
                    height: 155px;
                }

                & > img {
                    display: block;

                    width: 100%;
                    height: 100%;

                    object-fit: contain;
                }
            }
        }
    }

    & .banner-store-locator-container {
        gap: var(--section-spacing-sub-title);
        display: flex;
        align-items: center;
        flex-direction: row;

        padding-top: var(--section-spacing-title);

        @media (max-width: 989px) {
            gap: 12px;
            flex-direction: column;

            padding-top: 24px;
        }

        & > * { flex: 1 }

        & .banner-store-locator-title,
        & .banner-store-locator-content {
            font-style: normal;
            font-weight: 700;

            @media (max-width: 989px) { text-align: center; }
        }

        & .banner-store-locator-title {
            font-family: var(--font-family-heading);
            font-size: var(--font-h1-size);

            line-height: var(--font-h1-line-height);
        }

        & .banner-store-locator-content {
            font-family: var(--font-family-paragraph);
            font-size: var(--font-paragraph-large-size);

            line-height: var(--font-paragraph-large-line-height);
        }
    }
}