/* DE Media + Text (blog). A square picture column (280px or more) beside text capped at the 720px reading measure; the image comes first in the markup so it stacks above the text. */
[data-de26].de26-blog-media-text { container-type: inline-size; margin-block: var(--de26-gap-4x) var(--de26-gap-10x); }
[data-de26] .de26-blog-media-text__grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 720px);
  grid-template-areas: "media text";
  gap: var(--de26-gap-4x);
  align-items: start;
}
[data-de26].de26-blog-media-text--right .de26-blog-media-text__grid {
  grid-template-columns: minmax(0, 720px) minmax(280px, 1fr);
  grid-template-areas: "text media";
}
/* No image: one column at the reading measure. */
[data-de26].de26-blog-media-text--no-image .de26-blog-media-text__grid {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "text";
}
[data-de26] .de26-blog-media-text__media {
  grid-area: media;
  min-width: 0;
}
[data-de26] .de26-blog-media-text__text {
  grid-area: text;
  min-width: 0;
}
[data-de26] .de26-blog-media-text__image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: 0;
  border: 0;
  border-radius: var(--de26-radius-default);
  box-shadow: none;
}
[data-de26] .de26-blog-media-text__text .de26-blog__heading { margin-top: 0; }
[data-de26] .de26-blog-media-text__action { margin-top: var(--de26-gap-3x); }

/* Stacked: image above the text, square, capped, at the start of the block. Applies by viewport and by the width of the column the widget sits in. */
@media (max-width: 767px) {
  [data-de26] .de26-blog-media-text__grid,
  [data-de26].de26-blog-media-text--right .de26-blog-media-text__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "media" "text";
  }
  [data-de26].de26-blog-media-text--no-image .de26-blog-media-text__grid { grid-template-areas: "text"; }
  [data-de26] .de26-blog-media-text__image { max-width: 480px; }
}
@container (max-width: 600px) {
  [data-de26] .de26-blog-media-text__grid,
  [data-de26].de26-blog-media-text--right .de26-blog-media-text__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "media" "text";
  }
  [data-de26].de26-blog-media-text--no-image .de26-blog-media-text__grid { grid-template-areas: "text"; }
  [data-de26] .de26-blog-media-text__image { max-width: 480px; }
}