.play-gallery {
  display: grid;

  /* 300px → 18.75rem */
  grid-template-columns: repeat(auto-fill, minmax(12.75rem, 2fr));

  /* 100px → 6.25rem */
  grid-auto-rows: 4rem;

  grid-auto-flow: dense;

  /* 30px → 1.875rem */
  gap: 1.8rem;

  /* 160px 40px 40px → 10rem 2.5rem 2.5rem */
  padding: 10rem 2rem 2rem 2rem;
}

  
  .play-item {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    break-inside: avoid;
  }
  
  /* Height categories via row span */
  .height-small { grid-row: span 3; }   /* 100 x 3 = 300px */
  .height-medium { grid-row: span 4; }  /* 100 x 4 = 400px */
  .height-large { grid-row: span 5; }   /* 100 x 5 = 500px */
  .height-xlarge { grid-row: span 8; }   /* 100 x 5 = 500px */
  .span-two {
    grid-column: span 2;
  }
  .span-three {
    grid-column: span 3;
  }
  /* Image container */
  .play-item-image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  .play-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  /* Hover overlay */
  .play-item-image p {
    position: absolute;
    bottom: 10px;
    left: 10px;
    margin: 0;
    font-family: "Lato", sans-serif;
    font-weight: 200;
    font-size: 0.8rem;
    color: #101010;
    opacity: 0;
    visibility: hidden;
    z-index: 10;
    transition: opacity 0.6s ease, visibility 0.3s ease;
  }
  
  .play-item-image::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 20%, rgba(255,255,255,1) 90%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 5;
  }
  
  .play-item-image:hover::after {
    opacity: 1;
  }
  
  .play-item-image:hover p {
    opacity: 1;
    visibility: visible;
  }
  
  .play-item-image:hover img {
    /* transform: scale(1.02); */
    transition: transform 0.3s ease;
  }
  
/* ----------------------------------------------------
   TABLET — 2 COLUMNS, NATURAL IMAGE HEIGHT
---------------------------------------------------- */
@media (max-width: 1024px) {

  .play-gallery {
    max-width: 64rem;              /* same rhythm as project pages */
    margin: 0 auto;

    columns: 2;                    /* ← independent columns */
    column-gap: 24px;

    padding: 140px 2rem 2rem;
  }

  .play-item {
    break-inside: avoid;
    margin-bottom: 24px;
  }

  /* Reset grid behaviour */
  .play-gallery {
    display: block;
  }

  .height-small,
  .height-medium,
  .height-large,
  .height-xlarge {
    grid-row: auto;
  }

  .span-two,
  .span-three {
    grid-column: auto;
  }

  .play-item-image {
    height: auto;
  }

  .play-item-image img {
    width: 100%;
    height: auto;
    object-fit: contain;  /* preserves original ratios */
  }
}


  /* ----------------------------------------------------
   MOBILE — 1 COLUMN, NATURAL IMAGE HEIGHT
---------------------------------------------------- */
@media (max-width: 768px) {

  .play-gallery {
    max-width: 30rem;
    columns: 1;
    column-gap: 0;

    padding: 120px 1.2rem 1.5rem 1.2rem;
  }

  .play-item {
    margin-bottom: 20px;
  }
  /* Ensure nothing forces height */
  .height-small,
  .height-medium,
  .height-large,
  .height-xlarge {
    grid-row: auto;
  }

  .play-item-image {
    height: auto;
  }

  .play-item-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}