@use "sass:math";

.media-grid {
  @include list-unstyled;

  --media-grid-aspect-ratio: 4 / 3;
  --media-grid-gap: #{$grid-gutter-width};
  --media-grid-columns: 2;

  display: grid;
  grid-template-columns: repeat(var(--media-grid-columns), 1fr);
  gap: var(--media-grid-gap);

  @include media-breakpoint-up(md) {
    --media-grid-columns: 3;
  }

  @include media-breakpoint-up(xl) {
    --media-grid-columns: 4;
  }

  @include media-breakpoint-down(md) {
    --media-grid-gap: #{math.div($grid-gutter-width, 2)};
  }

  figure {
    margin: 0;
    position: relative;

    aspect-ratio: var(--media-grid-aspect-ratio);

    background: #eee;
    overflow: hidden;

    display: flex;
    align-items: center;

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }

  figure.fill {
    img {
      object-fit: cover;
    }
  }

  figure.zoom {
    img {
      transition: transform 250ms;
    }

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

  figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    background: rgba(black, 0.25);
    color: white;

    padding: 0.25rem 0.5rem;

    display: flex;

    font-size: 85%;
    font-weight: normal;
  }

  a {
    cursor: zoom-in;
  }
}

.media-grid-sm {
  --media-grid-columns: 3;

  @include media-breakpoint-up(md) {
    --media-grid-columns: 4;
  }

  @include media-breakpoint-up(lg) {
    --media-grid-columns: 6;
  }
}

.media-grid-lg {
  --media-grid-columns: 1;

  @include media-breakpoint-up(sm) {
    --media-grid-columns: 2;
  }

  @include media-breakpoint-up(lg) {
    --media-grid-columns: 3;
  }
}

.media-grid-auto {
  --media-grid-item-size: 240px;

  grid-template-columns: repeat(auto-fill, minmax(var(--media-grid-item-size), 1fr));
}