/* Photographic cards: used only by the two training-page grids. */
.training-grid.training-grid--photos {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.7vw, 1.5rem);
  border: 0;
  background: transparent;
}

.training-grid--photos > article {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: clamp(1rem, 1.7vw, 1.5rem);
  border: 1px solid var(--line-dark);
  overflow-wrap: break-word;
}

.article-section--dark .training-grid--photos > article {
  border-color: var(--line-light);
}

.training-grid--photos .training-card-photo {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0 0 1.1rem;
  overflow: hidden;
  background: var(--ink);
}

.training-grid--photos .training-card-photo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.training-grid--photos > article > h3 {
  margin: 0 0 .75rem;
}

.training-grid--photos > article > p {
  margin: 0;
}

.training-grid--photos > article > .training-card-caption {
  margin-top: auto;
  padding-top: 1rem;
  color: var(--muted, #626761);
  font-size: .8rem;
  line-height: 1.65;
}

.article-section--dark .training-grid--photos .training-card-caption {
  color: rgba(255, 255, 255, .74);
}

@media (max-width: 1050px) {
  .training-grid.training-grid--photos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .training-grid.training-grid--photos {
    grid-template-columns: minmax(0, 1fr);
  }
}