/* Inhaltsbereiche: Kurzvorstellung auf der Startseite und Textseiten. */

/* Kurzvorstellung: Text, daneben (am Handy darunter) zwei Bilder */
.intro {
  display: grid;
  gap: 1.5rem;
}

.intro__images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* Einheitlicher Bilderrahmen, wie in der Galerie */
.intro__images picture,
.figure picture {
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--color-paper-deep);
}

.intro__images img,
.figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--image-filter);
}

@media (min-width: 800px) {
  .intro {
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 3rem;
  }
}

/* Textseiten (Über mich, Impressum, Datenschutz) */
.prose h2 {
  margin-top: 2em;
}

.prose h2:first-child {
  margin-top: 0;
}

.figure {
  margin: 2rem 0;
}

.figure figcaption {
  padding-top: 0.6rem;
  font-size: var(--text-small);
}

/* Zwei Bilder nebeneinander */
.figure-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 2rem 0;
}

.figure-pair .figure {
  margin: 0;
}