.roundedContentCallout {
  position: relative;

  .accent {
    position: absolute;
    z-index: var(--arrangeBack);
    left: 0px;
    width: 100%;
    height: 50%;

    &.white { background-color: var(--white);}
    &.black { background-color: var(--black);}
    &.grey  { background-color: var(--grey);}
    &.green { background-color: var(--green);}

    &.top {
      top: 0px;
    }

    &.bottom {
      bottom: 0px;
    }
  }

  .innerWrapper {
    position: relative;
    z-index: var(--arrangeFront);
    background-color: var(--green);
    border-radius: var(--roundedCornersLarge);

    .innerContent {
      width: 100%;
      max-width: var(--maxSiteWidth);
      padding: 0 min(5vw, 50px);
      display: flex;
      flex-direction: column;
      gap: min(5vw, 50px);

      @media (min-width: 1280px) {
        flex-direction: row;
        gap: min(10vw, 100px);
      }

      .contentWrapper,
      .imageWrapper {
        width: 100%;

        @media (min-width: 1280px) {
          width: 50%;
        }
      }

      .contentWrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;

        h1, h2, h3, h4, h5, h6, ol, ul, p {
          color: var(--white);

          em {
            color: var(--black);
            font-style: normal;
          }
        }
      }

      .imageWrapper {
        img {
          max-height: 300px;
          width: 100%;
          object-fit: cover;
          object-position: bottom center;
          border-radius: var(--roundedCorners);

          @media (min-width: 1280px) {
            max-height: none;
            object-position: top center;
          }
        }
      }
    }
  }
}