/* 3/28/25 2pm */
/* 3/25/25 8pm */
/* 3/13/25 7:50pm */

/* 3/12/25 8:50pm */
figcaption {
  position: relative;
  font-family: var(--font-family-mono);
  font-size: var(--caption-font-size );
  padding-bottom: var(--padding);
  /* display: block; */
}
.img img {
  position: relative;
  aspect-ratio: auto;
  /* object-fit: contain; */
  padding-bottom: var(--padding-small);
  max-height: 400px;
  max-width: 90vw;
}

.img {
  padding-bottom: .5rem;
  background: none;

}

/* .album-gallery {
  line-height: 0;
  columns: 2;
  column-gap: 1.5rem;

} */
   .album-gallery {
    width: 100vw;
    display: flex;
    overflow-x: auto;
    gap: 1.5rem;
    scroll-snap-type: x mandatory;
    columns: unset;
      /* overflow: scroll; */
  scrollbar-color: lch(25% 78 296)  lch(71% 48 0);
  scrollbar-width: medium;
  }

  .album-gallery li {
    flex: 0 0 auto;
    scroll-snap-align: start;
    break-inside: avoid-column;
  }


/* Scroll Bar */
/* .album-gallery::-webkit-scrollbar {
  height: 10px; 
}



.album-gallery::-webkit-scrollbar-thumb {
  background-color: white;
  mix-blend-mode: difference; 
  border-radius: 9px;
} */

/* Related Events */
.related-events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Default mobile */
  gap: 1rem; /* Space between columns */
}



/* li {
  margin-bottom: var(--small-padding);
} */
@media screen and (min-width: 60rem) {

  .img img {
  position: relative;
  aspect-ratio: auto;
  /* object-fit: contain; */
  padding-bottom: var(--padding-small);
  max-height: 700px;
  max-width: 50vw;
}
   .album-gallery {
    /* Limit the visible area to half the viewport width */
    width: 50vw;
    /* Use flex to lay out the images in a row */
    display: flex;
    /* Enable horizontal scrolling */
    overflow-x: auto;
    /* Optional: add gap between items */
    gap: 1.5rem;
    /* Optional: for a smooth scroll feel */
    scroll-snap-type: x mandatory;
    /* Remove the columns property */
    columns: unset;
  }

  .album-gallery li {
    /* Prevent list items from shrinking and ensure they line up horizontally */
    flex: 0 0 auto;
    /* Optional: align items to start for scroll snapping */
    scroll-snap-align: start;
    /* Remove any column-break properties */
    break-inside: avoid-column;
  }

  /* .main-content {
overflow: scroll;  } */

.related-events-grid {
  grid-template-columns: repeat(auto-fit, minmax(100px, 200px)); /* Restrict max width */

}

}