section.highlight {



  .highlight__content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }


  --highlight-padding: 1rem;

  @container (width > calc(768/10 * 1rem)) {
    --highlight-padding: calc(25/10 * 1rem) calc(30/10 * 1rem);
  }

  @container (width > calc(992/10 * 1rem)) {
    --highlight-padding: calc(28/10 * 1rem) calc(40/10 * 1rem);
  }

  @container (width > calc(1500/10 * 1rem)) {
    --highlight-padding: calc(32/10 * 1rem) calc(43/10 * 1rem) calc(32/10 * 1rem) calc(57/10 * 1rem);
  }
}

.highlight__inner {
  display: flex;
  flex-direction: column;
  padding: calc(26/10 * 1rem) calc(35/10 * 1rem);

  @container (width > calc(768/10 * 1rem)) {
    flex-direction: row;
  }
}

.highlight__media {
  flex: 0 0 auto;
  width: 100%;
  height: calc(301/10 * 1rem);
  margin-bottom: calc(20/10 * 1rem);

  @container (width > calc(768/10 * 1rem)) {
    /* media width needs to be 572 + padding */
    flex: 0 0 calc(350/ 10 * 1rem);
    width: calc(350/10 * 1rem);
    height: calc(150 / 10 * 1rem);
    padding-right: calc(30 / 10 * 1rem);
    margin: 0;
  }

  @container (width > calc(992/10 * 1rem)) {
    /* media width needs to be 572 + padding */
    flex: 0 0 calc(450/ 10 * 1rem);
    width: calc(450/10 * 1rem);
    height: calc(250 / 10 * 1rem);
    padding-right: calc(40 / 10 * 1rem);
    margin: 0;
  }

  @container (width > calc(1500/10 * 1rem)) {
    /* media width needs to be 572 + padding */
    flex: 0 0 calc(629/ 10 * 1rem);
    width: calc(629 / 10 * 1rem);
    height: calc(337 / 10 * 1rem);
    padding-right: calc(57 / 10 * 1rem);
    margin: 0;
  }

  div:not(.contextual):not([data-contextual-id]) {
    width: 100%;
    height: 100%;
  }

  img {
    display: block;
    object-fit: cover;
    height: 100%;
    width: 100%;
  }
}

.highlight__content {
  flex: 0 1 100%;
  width: 100%;
  padding: 0;
  box-sizing: border-box;

  @container (width > calc(768/10 * 1rem)) {
    border-left: 1px solid black;
  }

  @container (width > calc(1200/10 * 1rem)) {

  }
}

.highlight__title {
  font-family: var(--font-family--roboto-flex);
  font-size: calc(26/10 * 1rem);
  letter-spacing: 0;
  font-weight: 800;

  @container (width > calc(768/10 * 1rem)) {
    font-size: calc(30/10 * 1rem);
  }

  @container (width > calc(992/10 * 1rem)) {
    font-size: calc(33/10 * 1rem);
  }

  @container (width > calc(1500/10 * 1rem)) {
    font-size: calc(40/10 * 1rem);
  }
}

.highlight__content__top {
  border-bottom: 1px solid black;
  width: 100%;
  padding: var(--highlight-padding);
}

.highlight__content__bottom {
  width: 100%;
  padding: var(--highlight-padding);
}

.highlight__actions {
  justify-content: flex-start;
  width: 100%;
}