.mcc__header {
  max-width: 700px;
  margin: 0 auto;
}

.mcc [data-col=text] h1:first-child,
.mcc [data-col=text] h2:first-child,
.mcc [data-col=text] h3:first-child,
.mcc [data-col=text] h4:first-child,
.mcc [data-col=text] h5:first-child {
  margin-top: 0
}

.mcc__image {
  display: flex;
  flex-direction: column
}

@media (min-width:1023px) {
  .mcc__image--small {
    max-width: 380px
  }
}

@media (min-width:1023px) {
  .mcc__image {
    flex-direction: row
  }

  .mcc__image--left {
    justify-content: flex-start
  }

  .mcc__image--right {
    justify-content: flex-end
  }
}

.mcc [data-col=text] {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  -webkit-hyphens: auto;
  hyphens: auto
}

.mcc [data-col=text] blockquote {
  border-left: 5px solid var(--c_primary);
  padding: 1rem 1rem 1rem 2rem;
  margin: 1rem
}

.mcc [data-col=text] blockquote p {
  margin: 0
}

.mcc [data-col=text] blockquote p+p {
  margin-top: 1rem
}

.mcc__angle-top {
  height: 50px;
  transform: translateY(1px)
}

.mcc__angle-bottom {
  height: 50px;
  transform: translateY(-1px);
}

/* CTA Mask */

.mask-angle {
  --space: 8.33em;
  --top-pos: 50%;
  --test: 10px;
  --bottom-pos: 33%;
  clip-path: polygon(var(--top-pos) 0, 100% calc(var(--space) / 2), 100% calc(100% - (var(--space) / 2)), var(--bottom-pos) 100%, 0 calc(100% - (var(--space) / 2)), 0 calc(var(--space) / 2));

}

.mask-angle > * {
  padding-top: var(--space);
  padding-bottom: var(--space);
}

.mask-angle .image-flood {
  max-width: 30em;
  margin: 1.33em auto calc(var(--space) * -1);
}

@media (min-width: 1025px) {

  .mask-angle .row {
    padding-right: 0;
  }

  .mask-angle .image-flood img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom left;
  }


  .mask-angle .image-flood {
    max-width: 100%;
    position: relative;
    margin: 0;
    margin-top: calc(var(--space) * -1);
    margin-bottom: calc(var(--space) * -1);
  }

}