/* ============================================================================
   Team mosaic ("Über uns")
   A grid of small square portraits with no gutter between rows/columns, so the
   whole block reads as one large rectangle rather than a set of cards. Column
   count steps up with viewport width to keep tiles roughly square instead of
   stretching a fixed column count on wide screens.
   ========================================================================= */

/* The mosaic and the "Wer wir sind" prose section right after it now share
   the same background, reading as one continuous surface — the full
   .ep-section padding-block on both sides of that shared edge stacked into
   a gap that looked like empty dead space rather than a section break. */
.ep-section--tight-b {
  padding-bottom: var(--ep-space-5);
}

.ep-section--tight-t {
  padding-top: var(--ep-space-5);
}

.ep-team-mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--ep-border);
  border: 1px solid var(--ep-border);
  border-radius: var(--ep-radius-lg);
  overflow: hidden;
}

@media (min-width: 36em) {
  .ep-team-mosaic {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 64em) {
  .ep-team-mosaic {
    grid-template-columns: repeat(6, 1fr);
  }
}

.ep-team-mosaic__tile {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--ep-bg-inverse);
}

/* Photos arrive in mixed colour casts and qualities; a uniform greyscale
   keeps the block calm and treats everyone the same. */
.ep-team-mosaic__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1);
}

.ep-team-mosaic__caption {
  position: absolute;
  inset: auto 0 0 0;
  margin: 0;
  padding: var(--ep-space-3) var(--ep-space-1) var(--ep-space-1);
  background: linear-gradient(to top, rgba(14, 42, 50, 0.85), rgba(14, 42, 50, 0));
  color: var(--ep-text-inverse);
  font-size: 0.625rem;
  font-weight: 600;
  line-height: var(--ep-leading-tight);
  text-align: center;
}

/* Tiles are smaller still on phones (3 columns), so the caption would
   otherwise cover a large share of a small photo. */
@media (min-width: 36em) {
  .ep-team-mosaic__caption {
    padding: var(--ep-space-4) var(--ep-space-2) var(--ep-space-2);
    font-size: var(--ep-text-xs);
  }
}