.media-grid {
  --column-count: 5;
  --aspect-ratio: 0.67;

  display: grid;
  grid-template-columns: repeat(var(--column-count), minmax(0, 1fr));
  grid-gap: var(--spacing-2);

  li {
    aspect-ratio: var(--aspect-ratio);
    display: grid;
    position: relative;
    overflow: hidden;

    a {
      display: block;
      color: var(--color-white);

      picture {
        height: 100%;
        border-radius: 0;
      }

      img {
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
      }

      .text-only {
        aspect-ratio: var(--aspect-ratio);
        overflow: hidden;
      }
    }
  }

  .meta {
    background: linear-gradient(transparent, var(--color-shadow) 90%);
    bottom: 0;
    height: 100%;
    position: absolute;
    transition: opacity 0.3s ease;
    width: 100%;

    .meta-text {
      text-shadow: 1px 1px 2px var(--color-black);
      transition: transform 0.3s var(--transition-bounce);
    }
  }
}

.media-grid--square {
  --aspect-ratio: 1;
}

@media (hover: hover) {
  .media-grid {
    li {
      a {
        .meta {
          opacity: 0;

          .meta-text {
            transition-delay: 0.05s;
            transform: translateY(var(--spacing-4));
          }
        }
      }

      a:hover {
        img {
          transform: scale(1.05);
        }

        .meta {
          opacity: 1;

          .meta-text {
            transform: translateY(0);
          }
        }
      }
    }
  }
}

.media-grid.square {
  --aspect-ratio: 1;
}

@container (max-width: 32rem) {
  .media-grid {
    --column-count: 3;
  }
}

@container (max-width: 24rem) {
  .media-grid {
    --column-count: 2;
  }
}