.grid--2-spalten-double {
  container-type: inline-size;
  position: relative;
  overflow: visible;
  background: var(--section-bg, transparent);
}

/* =========================
INNER GRID
========================= */

.grid--2-spalten-double__inner {
  display: grid;
  gap: var(--space-m);
  justify-items: start;
  grid-template-areas:
    "heading"
    "media"
    "content";
}

.grid--2-spalten-double__heading {
  grid-area: heading;
  align-self: end;
}

/* =========================
MEDIA STACK
========================= */

.grid--2-spalten-double__media {
  grid-area: media;
  position: relative;

  inline-size: clamp(200px, 100%, 500px);
  justify-self: center;
  align-self: center;
}

/* beide bilder */

.grid--2-spalten-double__figure {
  margin: 0;
  position: relative;
  aspect-ratio: 2/3;
}

/* base image */

.grid--2-spalten-double__figure--primary {
  position: relative;
  z-index: 1;
}

:root {
  --offset: clamp(15px, 2vw, 30px);
}

.grid--2-spalten-double__figure--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--primary-light);
  transform: translate(var(--offset), calc(var(--offset) * -1));
  z-index: -1;
}

.grid--2-spalten-double--reverse
  .grid--2-spalten-double__figure--primary::before {
  transform: translate(calc(var(--offset) * -1), calc(var(--offset) * -1));
}

/* overlay image */

.grid--2-spalten-double__figure--secondary {
  position: absolute;
  top: 37%;
  left: -10%;
  width: 65%;
  z-index: 2;

  transform: rotate(5deg);
  display: none;
}

/* images */

.grid--2-spalten-double__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================
CONTENT
========================= */

.grid--2-spalten-double__content-wrapper {
  grid-area: content;
}

.grid--2-spalten-double__button {
  margin-top: var(--space-l);
}

/* =========================
DESKTOP
========================= */

@container (min-width: 750px) {
  .grid--2-spalten-double__inner {
    grid-template-columns: 1.3fr 1fr;
    column-gap: var(--space-3xl);
    grid-template-areas:
      "heading media"
      "content media";
    align-items: start;
  }

  .grid--2-spalten-double--reverse .grid--2-spalten-double__inner {
    grid-template-areas:
      "media heading"
      "media content";
    grid-template-columns: 1fr 1.3fr;
  }

  .grid--2-spalten-double__media {
    justify-self: end;
  }

  .grid--2-spalten-double--reverse .grid--2-spalten-double__media {
    justify-self: start;
    margin-bottom: var(--space-l);
  }
  .grid--2-spalten-double__figure--secondary {
    display: block;
  }

  .grid--2-spalten-double--reverse .grid--2-spalten-double__figure--secondary {
    left: auto;
    right: -10%;
    top: 40%;

    transform: rotate(5deg);
  }
}