.scrolling-banner {
    position: relative;
    width: 100%;
    display: flex;
    transition: transform 1.5s ease-in-out;
    gap: 40px;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;

    will-change: transform;
}

.scrolling-banner, .banner-margin, .banner-margin img{
    margin: 0;
    padding: 0;
}

.scrolling-banner img {
    width: 100vw;
    aspect-ratio: 3 / 1;
    object-fit: cover;
}

.no-transition {
  transition: none !important;
}

.scroll-dots {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -100%);

    display: flex;
    gap: 40px;
    justify-content: center;
    height: 40px;
    width: 100%;
}

.scroll-dots section {
    width: 10px; 
    height: 10px; 
    background-color: gray; 
    border: black 1px solid;
    border-radius: 25px;

    transition: all 0.2s ease;

    position: relative;
    top: 50%;
    transform: translate(0%, -50%);
}

.scroll-dots .active {
    width: 14px;
    height: 14px;
    background-color: #d4af37;
}

/* 3. Desktop Only Configs */
@media (min-width: 721px) { 
}
/* 3. Mobile / Small Screens (600px and below) */
@media (max-width: 720px) { 
    .scrolling-banner img {
        aspect-ratio: auto;
    }
    }