.ctc.v3 {
    --flx-gap: 2.78rem;
    background: linear-gradient(to bottom, var(--background), var(--inner-theme) 82.258%);

    .frst-bg {
        --frst-blur: 4px;
        background-color: hsl(from var(--frst-bg-clr) h s l / .9);
        border: none;
        
        @media screen and (min-width:1280px) {
            & {
                box-shadow: 0 14px 24px 0 rgba(0, 0, 0, 0.20);
            }
        }
    }

    .frm {
        padding: 1.78rem;
    }

    .map img {

        height: 100%;
    }

    /* Safari renders overlay (auto-hiding) scrollbars by default, so the
       service-area list scrollbar fades out when idle and only reappears
       while scrolling. Setting -webkit-appearance: none on the scrollbar
       opts out of overlay mode and forces a persistent, always-visible
       scrollbar. scrollbar-gutter keeps the reserved space stable. */
    .ui-scroll {
        scrollbar-gutter: stable;

        /* iOS Safari can't keep a native scrollbar visible when idle, so fade
           the bottom edge of the list to signal there's more to scroll. The
           mask is anchored to the element box (not the scrolled content), so
           it stays pinned to the bottom edge as the user scrolls. */
        -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
        mask-image: linear-gradient(to bottom, #000 55%, transparent);

        &::-webkit-scrollbar {
            -webkit-appearance: none;
            width: var(--ui-scroll-w) !important;
        }

        &::-webkit-scrollbar-thumb {
            background-color: var(--text-color);
            border-radius: var(--ui-scroll-brd-rds);
        }
    }

    @media screen and (min-width: 700px) {
        & {
            .grd.mx-2 {
                --itm-val: 50;
            }
        }  

    }

}