/* Trassify Magazin, redaktionelles Bild-Text-Layout
   Paar 1 Bild links, Paar 2 Bild rechts, Paar 3 Bild links. */

.trm-artikel{
  --trm-ink:#1C1C1A;
  --trm-soft:#5b5b56;
  --trm-gruen:#5E7C59;
  --trm-radius:16px;
  max-width:1100px;
  margin:0 auto;
  padding:20px;
}

.trm-paar{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
  margin:0 0 72px;
}
.trm-paar:last-child{margin-bottom:0}

/* Bild-Spalte, quadratisch */
.trm-spalte-bild img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:var(--trm-radius);
  display:block;
}

/* Text-Spalte */
.trm-spalte-text h2{
  font-size:clamp(1.5rem,2.4vw,2rem);
  font-weight:300;
  line-height:1.2;
  color:var(--trm-ink);
  margin:0 0 18px;
}
.trm-text{
  font-size:1.12rem;
  line-height:1.75;
  color:var(--trm-soft);
}
.trm-text p{margin:0 0 1.1em}
.trm-text p:last-child{margin-bottom:0}
.trm-text a{color:var(--trm-gruen);text-underline-offset:3px}

/* Umkehrung: Bild rechts.
   Grid-Reihenfolge drehen, sodass die Bild-Spalte in Spalte 2 rutscht. */
.trm-bild-rechts .trm-spalte-bild{order:2}
.trm-bild-rechts .trm-spalte-text{order:1}

/* Handy: untereinander, Bild immer oben */
@media(max-width:768px){
  .trm-paar{
    grid-template-columns:1fr;
    gap:24px;
    margin-bottom:52px;
  }
  /* auf dem Handy immer Bild oben, egal welche Seite am Desktop */
  .trm-bild-rechts .trm-spalte-bild{order:0}
  .trm-bild-rechts .trm-spalte-text{order:0}
  .trm-spalte-bild img{aspect-ratio:4/3}
}