/* =========================
   BASIS / RESET
   ========================= */

@import url("https://fonts.googleapis.com/css2?family=Special+Elite&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Times New Roman', Times, serif;
  background: #ffffff;
  color: #000000;
}

/* =========================
   LAYOUT
   ========================= */

main.stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  padding: 3rem;
}

/* Wrapper-Elemente auflösen */
.gif-row,
.hero-row {
  display: contents;
}

/* =========================
   GIF + TEXT
   ========================= */

.gif-box {
  display: flex;
  flex-direction: column;
  margin-top: -8rem;
  gap: 0.5rem;
}

.gif-box img {
  width: 72%;
  height: auto;
  display: block;
}

.gif-caption {
  font-family: 'Special Elite';
  padding-left: 10%;
  padding-bottom: 30%;
  font-size: 1.7rem;
  line-height: 1.2;
  transform: scaleX(0.85);
}

.gif-title {
  font-family: 'Special Elite';
  font-weight: 700;
  font-size: 2.6rem;
  margin-bottom: -0.95rem;
}

/* =========================
   HERO BILDER
   ========================= */

.hero-left,
.hero-right {
  width: 100%;
  height: auto;
  display: block;
}

/* =========================
   GRID-ZUORDNUNG
   ========================= */

/* Linke Spalte */
.gif-box:nth-of-type(1) {
  grid-column: 1;
  grid-row: 1;
}

.hero-left {
  grid-column: 1;
  grid-row: 2;
}

/* Rechte Spalte */
.gif-box:nth-of-type(2) {
  grid-column: 2;
  grid-row: 1;
}

.hero-right {
  grid-column: 2;
  grid-row: 2;
}

/* =========================
   RESPONSIVES LAYOUT
   ========================= */

@media (max-width: 768px) {
  main.stack {
    display: grid;
    grid-template-columns: 1fr; /* Nur noch eine Spalte */
    gap: 2rem;
    padding: 1rem;
  }

  /* GIFs und Hero-Bilder anpassen */
  .gif-box img,
  .hero-left,
  .hero-right {
    width: 100%; /* Bilder füllen jetzt die Spalte */
    margin-top: 2rem; /* Abstand nach oben */
  }

  .gif-caption {
    padding-left: 0; /* Kein Einzug mehr */
    padding-bottom: 2rem; /* Etwas Abstand nach unten */
    transform: scaleX(1); /* Keine Skalierung mehr */
  }

  .gif-title {
    font-size: 2.2rem; /* optional etwas kleiner */
    margin-bottom: 0.2rem;
  }

  /* Grid-Zuordnung zurücksetzen */
  .gif-box:nth-of-type(1),
  .gif-box:nth-of-type(2),
  .hero-left,
  .hero-right {
    grid-column: 1;
    grid-row: auto;
  }

  /* Abstand vor dem zweiten GIF */
  .gif-box:nth-of-type(2) {
    margin-top: 3rem;
  }
}