/** At this monitor size it is wider than Figma */
/* @todo replace with stacked-can-gutter.twig */
.markup .markup__inner {
    padding-top: 1.5rem;
    max-width: 1039px;
    margin: 0 auto;
  }
.markup .markup__title h2 {
      font-weight: 700;
      letter-spacing: 2.5px;
    }
.markup .markup__eyebrow {
    font-size: 0.875rem;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
  }
.markup .markup__image {
    width: 100%;
    height: auto;
    margin-top: 1.25rem;
    aspect-ratio: 350/200;
    overflow: hidden;
  }
.markup .markup__image img {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
      -o-object-position: center;
         object-position: center;
    }
@media (min-width: 50.001rem) {
.markup .markup__image {
      margin-top: 1.5625rem;
      margin-bottom: 3.75rem;
      aspect-ratio: 1030/260;
  }
    }
.markup .markup__content .media-oembed-content {
      width: 100%;
      height: auto;
      aspect-ratio: 16/9;
    }
.markup .markup__content .media-oembed-content iframe {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
      }
.markup .markup__content p:last-child {
      margin-bottom: 0;
    }
@media (min-width: 50.001rem) {
.markup[data-variant="publishing"] {
      max-width: 100%;
  }
    }
@media (min-width: 50.001rem) {
.markup[data-variant="learning"] .markup__inner {
        display: flex;
        gap: 1rem;
    }

        .markup[data-variant="learning"] .markup__inner .markup__title {
          width: 40%;
          padding-right: 5rem;
        }

        .markup[data-variant="learning"] .markup__inner .markup__content {
          flex: 1;
        }
      }
.markup[data-variant="breakout-tip"] {
    position: relative;
    padding: 25px 40px;
    background-color: var(--sage-light);

  }
.markup[data-variant="breakout-tip"]::before {
      content: "";
      position: absolute;
      right: -50px;
      bottom: -35px;
      width: 120px;
      height: 120px;
      background-image: url("assets/icon-tip.svg");
      background-size: 100%;
    }
.markup[data-variant="breakout-tip"] h4 {
      margin-block-start: 0;
      font-weight: 700;
      letter-spacing: 1.3px;
      margin-bottom: 15px;
    }
.markup[data-variant="breakout-tip"] .markup__inner {
      padding-top: 0;
    }
.markup[data-variant="breakout-tip"] .markup__inner p:first-child  {
        margin-top: 0;
      }
.markup[data-variant="breakout-tip"] .markup__inner p:last-child {
        margin-bottom: 0;
      }
.markup[data-variant="breakout-simple"] {
    background-color: var(--onion);
    margin: 1.5rem 0;
  }
@media (min-width: 50.001rem) {
.markup[data-variant="breakout-simple"] {
      margin: 3.25rem 0;
  }
    }
.markup[data-variant="breakout-simple"] strong {
      font-size: 1.25rem;
      font-family: var(--heading-family);
      color: var(--sage);
      font-weight: 500;
      display: block;
      margin-bottom: 1rem;
    }
.markup[data-variant="breakout-simple"] .markup__inner {
      padding: 1.5625rem;
    }