/* ==========================================================================
   Gallery strip — templates/partials/gallery-strip.php (home, Büro).
   Four images 2×2 on the left, the fifth large on the right (live layout).
   ========================================================================== */

@layer components {
  .gallery-strip {
    padding-block-end: var(--space-8);
  }

  .gallery-strip__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
    padding: 0;
    margin: 0;
  }

  .gallery-strip__item {
    aspect-ratio: 3 / 2;
  }

  .gallery-strip__item--large {
    grid-column: 3;
    grid-row: 1 / span 2;
    aspect-ratio: auto;
  }

  .gallery-strip__link {
    block-size: 100%;
  }

  .gallery-strip__link img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  @media (max-width: 47.99rem) {
    .gallery-strip__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gallery-strip__item--large {
      grid-column: 1 / -1;
      grid-row: auto;
      block-size: 15.625rem;   /* 250px, as on live */
    }
  }
}