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

.grid--2-spalten__inner {
  display: grid;
  position: relative;
  gap: var(--space-m);
  justify-items: start;
  padding: var(--padding-l);
  grid-template-areas:
    "heading"
    "figure"
    "content";
}

.grid--2-spalten__inner::before {
  position: absolute;
  content: "";
  inset: 0;
  background-color: color-mix(in srgb, var(--base) 80%, transparent);
  z-index: -1;
}

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

.grid--2-spalten__figure {
  grid-area: figure;
  inline-size: clamp(200px, 100%, 500px);
  block-size: auto;
  align-self: center;
  justify-self: center;
  aspect-ratio: 2/3;
}

.grid--2-spalten__img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.grid--2-spalten__content-wrapper {
  grid-area: content;
}

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

@container (min-width: 750px) {
  .grid--2-spalten__inner {
    grid-template-columns: 1.3fr 1fr;
    gap: var(--space-l);
    grid-template-areas:
      "heading figure"
      "content figure";
    justify-items: start;
    align-items: start;
  }

  .grid--2-spalten--reverse .grid--2-spalten__inner {
    grid-template-areas:
      "figure heading"
      "figure content";
    grid-template-columns: 1fr 1.3fr;
  }

  .grid--2-spalten__figure {
    justify-self: end;
    margin-bottom: 0;
  }

  .grid--2-spalten--reverse .grid--2-spalten__figure {
    justify-self: start;
  }
}