/* 1. Container Fix for Individual Elements */
body {
background-image:url('starBG.gif');
color: #fff;
font-family:Verdana;
}
.media-scroller {
  display: grid;
  grid-auto-flow: column;         /* Forces items into horizontal columns */
  grid-auto-columns: 300px;       /* Sets a fixed width for each card */
  gap: 16px;                      /* Spacing between elements */
  
  overflow-x: auto;               /* Enables horizontal scrolling */
  overflow-y: hidden;             /* Cleans up any vertical spill */
  padding: 24px;
  
  /* Modern CSS Scroll Snapping */
  scroll-snap-type: x mandatory; 
  scroll-padding: 24px;
}

/* 2. Container Fix for the "Groups elements" section */
.media-scroller--with-groups {
  grid-auto-columns: 100%;        /* Groups will take up full container width */
}

/* 3. The Inner Group Layout */
.media-group {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;         /* Distributes elements evenly inside a group */
  gap: 16px;
}

/* 4. Child Elements & Images Styling */
.media-element {
  display: grid;
  grid-template-rows: min-content;
  gap: 8px;
  padding: 16px;
  background: #f0f0f0;            /* Optional layout visualization color */
  border-radius: 8px;
  
  /* Snapping Alignment */
  scroll-snap-align: start;
}

.media-element img {
  inline-size: 100%;              /* Forces image to fill the card width */
  aspect-ratio: 16 / 9;           /* Keeps your layout looking uniform */
  object-fit: cover;              /* Prevents images from distorting */
  border-radius: 4px;
}