.visually-hidden {
    clip: rect(1px 1px 1px 1px);
    /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.hidden {
    display: none;
}


.sticky-section {
  position: sticky;
  top: 0; /* or any offset you prefer */
  background-color: white; /* optional, helps with visibility */
  z-index: 1000; /* optional, ensures it stays above other content */
  padding: 1em;
}

/* Responsive show/hide helpers */

/* Hide on all by default */
.hidden {
    display: none !important;
}

/* Show only on small (0-639px) */
.show-sm {
    display: block !important;
}

@media (min-width: 640px) {
    .show-sm {
        display: none !important;
    }
}

/* Show only on medium (640-959px) */
.show-md {
    display: none !important;
}

@media (min-width: 640px) {
    .show-md {
        display: block !important;
    }
}

@media (min-width: 960px) {
    .show-md {
        display: none !important;
    }
}

/* Show only on large (960-1215px) */
.show-lg {
    display: none !important;
}

@media (min-width: 960px) {
    .show-lg {
        display: block !important;
    }
}

@media (min-width: 1216px) {
    .show-lg {
        display: none !important;
    }
}

/* Show only on extra large (1216px and up) */
.show-xl {
    display: none !important;
}

@media (min-width: 1216px) {
    .show-xl {
        display: block !important;
    }
}

/* Hide on small (0-639px) */
@media (max-width: 639px) {
    .hidden-sm {
        display: none !important;
    }
}

/* Hide on medium (640-959px) */
@media (min-width: 640px) and (max-width: 959px) {
    .hidden-md {
        display: none !important;
    }
}

/* Hide on large (960-1215px) */
@media (min-width: 960px) and (max-width: 1215px) {
    .hidden-lg {
        display: none !important;
    }
}

/* Hide on extra large (1216px and up) */
@media (min-width: 1216px) {
    .hidden-xl {
        display: none !important;
    }
}

@media(max-width:639px) {

    .gallery__item--1,
    .gallery__item--3,
    .gallery__item--4,
    .gallery__item--5,
    .gallery__item--6,
    .gallery__item--7 {
        display: none;
    }

    .bux-hero--card-full img {
        aspect-ratio: unset;
        left: unset;
        position: unset;
        top: unset;
    }
}

@media(min-width:640px) {
    .gallery-container {
        width: 100%;
        margin: 2rem auto;
    }

    .gallery {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(4, 10vw);
        grid-gap: 1rem;
    }

    .gallery__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .gallery__item--1 {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 3;
    }

    .gallery__item--2 {
        grid-column-start: 2;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 3;
    }

    .gallery__item--3 {
        grid-column-start: 4;
        grid-column-end: 5;
        grid-row-start: 1;
        grid-row-end: 1;
    }

    .gallery__item--4 {
        grid-column-start: 5;
        grid-column-end: 6;
        grid-row-start: 1;
        grid-row-end: 1;
    }

    .gallery__item--5 {
        grid-column-start: 4;
        grid-column-end: 6;
        grid-row-start: 2;
        grid-row-end: 5;
    }

    .gallery__item--6 {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 3;
        grid-row-end: 5;
    }

    .gallery__item--7 {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 3;
        grid-row-end: 5;
    }


    .bux-hero--card-full .gallery img {
        aspect-ratio: unset;
        left: unset;
        position: unset;
        top: unset;
    }
}

@media(min-width:1400px) {
    .gallery {
        grid-template-rows: repeat(4, 148px);
        grid-gap: 1.5rem;
    }
}