// ==========================================================================
// Media Grid Component
// Reusable component for image/video arrangements
// ==========================================================================

.c-media-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: $spacer;

  @include media-breakpoint-up(md) {
    gap: $spacer * 1.5;
  }

  // Image wrapper
  &__item {
    position: relative;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

  }

  // ---------------------------------------------------------------------------
  // Variant: Two columns
  // ---------------------------------------------------------------------------

  &--2cols {
    @include media-breakpoint-up(md) {
      grid-template-columns: 1fr 1fr;
    }
  }

  // ---------------------------------------------------------------------------
  // Variant: Staggered (offset first item)
  // ---------------------------------------------------------------------------

  &--staggered {
    @include media-breakpoint-up(md) {
      grid-template-columns: 1fr 1fr;

      .c-media-grid__item:first-child {
        transform: translateY($spacer * 2);
      }
    }
  }

  // ---------------------------------------------------------------------------
  // Variant: No stretch — image displays at natural dimensions (width: 100%, height: auto)
  // ---------------------------------------------------------------------------

  &--no-stretch {
    .c-media-grid__item {
      overflow: visible;

      img {
        width: auto;
        height: auto;
        object-fit: initial;
      }
    }
  }

  // ---------------------------------------------------------------------------
  // Variant: Cover (full height, for sliders)
  // ---------------------------------------------------------------------------

  &--cover {
    height: 100%;

    .c-media-grid__item {
      height: 100%;
    }
  }
}