/* Image and text side by side, the image reaching the edge of the window. */
[qcms-mod^="cont.luca.feature"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  margin-block: clamp(3rem, 7vw, 6rem);

  > .media :is(img, cms-image2) {
    width: 100%;
    height: 100%;
    max-height: 26rem;
    object-fit: cover;
    display: block;
  }

  /* The picture bleeds to the edge, the text must not: it lines up with the page
     measure, so the outer side carries the same gutter as .u2-width. */
  > .text {
    max-width: 32rem;
    padding-inline: 1rem;
  }

  [qcms-name=actions] {
    p { margin: 0 }
    a {
      display: inline-block;
      font-size: .76rem;
      text-transform: uppercase;
      letter-spacing: .13em;
      text-decoration: none;
      border-bottom: 1px solid transparent;
    }
    a:hover { border-color: currentColor }
  }

  @media (width < 48rem) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The picture bleeds to the edge, the text must not: its outer side keeps the same
   gutter as .u2-width, so it lines up with the rest of the page.
   A margin, never padding — padding is taken out of the column's own max-width, so on a
   wide screen the gutter would eat the whole measure and the text collapse to one word
   per line. */
[qcms-mod="cont.luca.feature"] > .text { margin-inline-end: max(0px, calc((100vw - var(--width)) / 2)) }
[qcms-mod="cont.luca.feature.right"] > .text { margin-inline-start: max(0px, calc((100vw - var(--width)) / 2)) }