:root {
  
  --img-radius: 28px;
  --img-radius-sm: 20px;
  --media-gap: 56px;
}

.media__figure img,
.hero__visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--img-radius);
  
  object-fit: cover;
  object-position: center;
}

.hero__visual img {
  mix-blend-mode: normal;
}

.hero__visual {
  margin-right: 0;
}

.hero picture {
  display: block;
}

.media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--media-gap);
  margin-bottom: 44px;
}

.media__figure {
  margin: 0;
  min-width: 0;
}

.media__figure { grid-column: 1; grid-row: 1; }
.media__body   { grid-column: 2; grid-row: 1; }

.media--reverse .media__figure { grid-column: 2; }
.media--reverse .media__body   { grid-column: 1; }

.media .section__intro {
  max-width: none;
  min-width: 0;
}
.media .section__intro > *:last-child {
  margin-bottom: 0;
}

.media--full {
  grid-template-columns: 1fr;
}
.media--full .media__figure,
.media--full .media__body {
  grid-column: 1;
}

.media__caption {
  margin: 12px 2px 0;
  font-size: .86rem;
  line-height: 1.45;
  color: var(--muted);
}

@media (max-width: 1000px) {
  :root { --media-gap: 40px; }
  
  .hero__visual img { max-width: 720px; margin-inline: auto; }
}

@media (max-width: 900px) {
  .media,
  .media--reverse {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .media .media__figure,
  .media--reverse .media__figure { grid-column: 1; grid-row: 1; }
  .media .media__body,
  .media--reverse .media__body   { grid-column: 1; grid-row: 2; }
}

@media (max-width: 780px) {
  :root { --img-radius: var(--img-radius-sm); }

  
  .hero .wrap {
    grid-template-areas: "text" "visual" "facts";
  }
  .hero__visual img { max-width: 560px; }

  .media { margin-bottom: 32px; }
}

@media print {
  .media { grid-template-columns: 1fr; }
  .media__figure { display: none; }
}