.node--type-persona.node--view-mode-teaser {
  .node__content {
    position: relative;
  }
  .overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    .overlay--content {
      display: flex;
      flex-direction: column;
      align-self: center;
      justify-content: center;
      margin-bottom: 1.25rem;
    }
  }
}

.page-node-type-subsidiary,
.page-node-type-persona,
.page-node-type-page {
  .field.field--name-field-body-persona,
  .field.field--name-field-body-page {
    padding: 4.375rem;
  }
  /* hypostart */
  .green .paragraph--type--text-photo-w-title,
  .green .paragraph--type--text-w-title,
  .hypostart .paragraph--type--text-photo-w-title,
  .hypostart .paragraph--type--text-w-title {
    h1 span,
    h2 span {
      color: var(--primary_color_3);
    }
  }
  .hyposmart .paragraph--type--text-photo-w-title,
  .hyposmart
    .paragraph--type--text-w-title
    .hypocover
    .paragraph--type--text-photo-w-title,
  .hypocover .paragraph--type--text-w-title {
    h1 span,
    h2 span {
      color: var(--primary_color_2);
    }
  }
  .purple .paragraph--type--text-photo-w-title,
  .purple .paragraph--type--text-w-title {
    h1 span,
    h2 span {
      color: var(--primary_color_2);
    }
  }
  .blue-dark .paragraph--type--text-photo-w-title,
  .blue-dark .paragraph--type--text-w-title {
    h1 span,
    h2 span {
      color: var(--primary_color_2);
    }
  }

  .blue-light .paragraph--type--text-photo-w-title,
  .blue-light
    .paragraph--type--text-w-title
    .hyposolutions
    .paragraph--type--text-photo-w-title,
  .hyposolutions .paragraph--type--text-w-title {
    h1 span,
    h2 span {
      color: var(--primary_color_4);
    }
  }
  .green header [class^='col'],
  .green header [class^='col']:first-child:before,
  .green header [class^='col']:last-child:after,
  .hypostart header [class^='col'],
  .hypostart header [class^='col']:first-child:before,
  .hypostart header [class^='col']:last-child:after {
    background-color: var(--primary_color_3);
  }
  .hyposmart header [class^='col'],
  .hyposmart header [class^='col']:first-child:before,
  .hyposmart header [class^='col']:last-child:after,
  .hypocover header [class^='col'],
  .hypocover header [class^='col']:first-child:before,
  .hypocover header [class^='col']:last-child:after {
    background-color: var(--primary_color_2);
  }
  .purple header [class^='col'],
  .purple header [class^='col']:first-child:before,
  .purple header [class^='col']:last-child:after {
    background-color: var(--primary_color_2);
  }
  .blue-dark header [class^='col'],
  .blue-dark header [class^='col']:first-child:before,
  .blue-dark header [class^='col']:last-child:after {
    background-color: var(--primary_color_2);
  }
  .blue-light header [class^='col'],
  .blue-light header [class^='col']:first-child:before,
  .blue-light header [class^='col']:last-child:after,
  .hyposolutions header [class^='col'],
  .hyposolutions header [class^='col']:first-child:before,
  .hyposolutions header [class^='col']:last-child:after {
    background-color: var(--primary_color_4);
  }
  .green [class^='col']:first-child:after,
  .hypostart [class^='col']:first-child:after {
    border-top-color: var(--primary_color_3);
  }
  .hyposmart [class^='col']:first-child:after,
  .hypocover [class^='col']:first-child:after {
    border-top-color: var(--primary_color_2);
  }
  .purple [class^='col']:first-child:after {
    border-top-color: var(--primary_color_2);
  }
  .blue-dark [class^='col']:first-child:after {
    border-top-color: var(--primary_color_2);
  }
  .blue-light [class^='col']:first-child:after,
  .hyposolutions [class^='col']:first-child:after {
    border-top-color: var(--primary_color_4);
  }
  .green .field--type-paragraph-0 .paragraph--type--text-photo-w-title h1,
  .green .field--type-paragraph-0 .paragraph--type--text-w-title h1,
  .green
    .field--type-paragraph-0
    .paragraph--type--text-photo-w-title
    .field--name-field-body-photo,
  .hypostart .field--type-paragraph-0 .paragraph--type--text-photo-w-title h1,
  .hypostart .field--type-paragraph-0 .paragraph--type--text-w-title h1,
  .hypostart
    .field--type-paragraph-0
    .paragraph--type--text-photo-w-title
    .field--name-field-body-photo {
    &:before {
      background: url(../../images/icon--hypostart-green.png);
    }
  }
  .hyposmart .field--type-paragraph-0 .paragraph--type--text-photo-w-title h1,
  .hyposmart .field--type-paragraph-0 .paragraph--type--text-w-title h1,
  .hyposmart
    .field--type-paragraph-0
    .paragraph--type--text-photo-w-title
    .field--name-field-body-photo,
  .hypocover .field--type-paragraph-0 .paragraph--type--text-photo-w-title h1,
  .hypocover .field--type-paragraph-0 .paragraph--type--text-w-title h1,
  .hypocover
    .field--type-paragraph-0
    .paragraph--type--text-photo-w-title
    .field--name-field-body-photo {
    &:before {
      background: url(../../images/icon--hyposmart-purple.png);
    }
  }
  .purple .field--type-paragraph-0 .paragraph--type--text-photo-w-title h1,
  .purple .field--type-paragraph-0 .paragraph--type--text-w-title h1,
  .purple
    .field--type-paragraph-0
    .paragraph--type--text-photo-w-title
    .field--name-field-body-photo {
    &:before {
      background: url(../../images/icon--hyposmart-purple.png);
    }
  }
  .blue-dark .field--type-paragraph-0 .paragraph--type--text-photo-w-title h1,
  .blue-dark.field--type-paragraph-0 .paragraph--type--text-w-title h1,
  .blue-dark
    .field--type-paragraph-0
    .paragraph--type--text-photo-w-title
    .field--name-field-body-photo {
    &:before {
      background: url(../../images/icon--hyposmart-purple.png);
    }
  }
  .blue-light .field--type-paragraph-0 .paragraph--type--text-photo-w-title h1,
  .blue-light .field--type-paragraph-0 .paragraph--type--text-w-title h1,
  .blue-light
    .field--type-paragraph-0
    .paragraph--type--text-photo-w-title
    .field--name-field-body-photo,
  .hyposolutions .paragraph--type--text-photo-w-title h1,
  .hyposolutions .field--type-paragraph-0 .paragraph--type--text-w-title h1,
  .hyposolutions
    .paragraph--type--text-photo-w-title
    .field--name-field-body-photo {
    &:before {
      background: url(../../images/icon--hyposolutions-lightblue.png);
    }
  }
  .green .field--name-field-body-txt ul,
  .hypostart .field--name-field-body-txt ul {
    list-style-image: url(../../images/icon--check.png);
  }
  .hyposmart .field--name-field-body-txt ul,
  .hypocover .field--name-field-body-txt ul {
    list-style-image: url(../../images/icon--check-purple.png);
  }
  .purple .field--name-field-body-txt ul {
    list-style-image: url(../../images/icon--check-purple.png);
  }
  .blue-light .field--name-field-body-txt ul,
  .hyposolutions .field--name-field-body-txt ul {
    list-style-image: url(../../images/icon--check-lightblue.png);
  }
  .hyposmart footer [class^='col']:first-child,
  .hyposmart footer [class^='col']:first-child:before,
  .hypocover footer [class^='col']:first-child,
  .hypocover footer [class^='col']:first-child:before {
    background: var(--primary_color_2);
  }
  .purple footer [class^='col']:first-child,
  .purple footer [class^='col']:first-child:before {
    background: var(--primary_color_2);
  }
  .blue-dark footer [class^='col']:first-child,
  .blue-dark footer [class^='col']:first-child:before {
    background: var(--primary_color_2);
  }
  .green footer [class^='col']:first-child,
  .green footer [class^='col']:first-child:before,
  .hypostart footer [class^='col']:first-child,
  .hypostart footer [class^='col']:first-child:before {
    background: var(--primary_color_3);
  }
  .blue-light footer [class^='col']:first-child,
  .blue-light footer [class^='col']:first-child:before,
  .hyposolutions footer [class^='col']:first-child,
  .hyposolutions footer [class^='col']:first-child:before {
    background: var(--primary_color_4);
  }

  article {
    header {
      overflow: hidden;
      padding-bottom: 0.688rem;
      .row {
        display: flex;
      }
      [class^='col'] {
        padding: 0;
        display: flex;
        flex: 1;
        &:first-child {
          position: relative;
          &:before {
            content: '';
            position: absolute;
            left: -100%;
            height: 100%;
            width: 200%;
            z-index: -1;
          }
          &:after {
            top: 100%;
            left: 70px;
            border: solid transparent;
            content: ' ';
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
            border-color: rgba(255, 255, 255, 0);
            border-width: 11px;
            margin-left: -11px;
            z-index: 1;
          }
        }
        &:last-child {
          position: relative;
          &:after {
            content: '';
            position: absolute;
            top: 0;
            left: 100%;
            height: 100%;
            width: 200%;
            z-index: -1;
          }
        }
      }
      h1 {
        color: white;
        font-family: 'niveau-grotesk', sans-serif;
        font-style: normal;
        font-weight: 300;
        font-size: 1.625rem;
        padding-left: 4.063rem;
        margin: 1.25rem 0;
        align-self: center;
      }
      strong {
        font-family: 'niveau-grotesk', sans-serif;
        font-style: normal;
        font-weight: 500;
        font-style: normal;
      }
      img.image-style-persona-header {
        object-fit: cover;
        display: block;
        max-width: 100%;
        height: auto;
        height: 100%;
        width: 100%;
      }
    }
    [class*='field--type-paragraph'] {
      margin-top: 1.875rem;
      &:first-child {
        margin-top: 0;
      }
    }
    .field--name-field-body-txt {
      color: var(--gray);
      font-family: 'niveau-grotesk', sans-serif;
      font-style: normal;
      font-weight: 400;
      font-size: 1rem;
      ul {
        padding: 0;
        li {
          font-family: 'niveau-grotesk', sans-serif;
          font-style: normal;
          font-weight: 300;
          font-size: 1rem;
        }
        li > strong:first-child {
          color: var(--primary_color_1);
          font-family: 'niveau-grotesk', sans-serif;
          font-style: normal;
          font-weight: 400;
          font-size: 1.125rem;
        }
      }
    }
    .field--name-field-body-photo {
      transform: rotate(5deg);
      text-align: center;
      display: inline-block;
      box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.12),
        0 1px 2px rgba(0, 0, 0, 0.24);
      border-radius: 5px;
      &:before {
        content: '';
        width: 30px;
        height: 34px;
        position: absolute;
        bottom: -8px;
        left: 50%;
        margin-left: -15px;
      }
      img {
        border-radius: 5px;
      }
    }
    .field--type-paragraph-0
      .paragraph--type--text-photo-w-title
      [class^='col']:first-child {
      padding-left: 0;
      padding-right: 30px;
    }
    .field--type-paragraph-0
      .paragraph--type--text-photo-w-title
      [class^='col']:last-child {
      padding-left: 30px;
      padding-right: 0;
      text-align: center;
    }
    .paragraph--type--text-photo-w-title h1,
    .paragraph--type--text-photo-w-title h2,
    .paragraph--type--text-w-title h1,
    .paragraph--type--text-w-title h2 {
      color: var(--primary_color_1);
      font-family: 'niveau-grotesk', sans-serif;
      font-style: normal;
      font-weight: 400;
      font-size: 1.625rem;
    }
    .field--type-paragraph-0 .paragraph--type--text-photo-w-title h1,
    .field--type-paragraph-0 .paragraph--type--text-w-title h1 {
      margin-top: 0;
      margin-bottom: 1.875rem;
      &:before {
        content: '';
        width: 30px;
        height: 34px;
        display: inline-block;
      }
    }
    .paragraph--type--text-photo-w-title h2,
    .paragraph--type--text-w-title h2 {
      font-size: 1.5rem;
      margin-bottom: 1.875rem;
    }
    footer {
      overflow: hidden;
      margin: 3.75rem 0 0 0;
      [class^='col'] {
        padding: 5rem 0 1.875rem 0;
        text-align: center;
        position: relative;
        &:first-child {
          &:before {
            content: '';
            position: absolute;
            width: 200%;
            height: 100%;
            left: -100%;
            top: 0;
            z-index: -1;
          }
        }
        &:last-child {
          background: var(--primary_color_1);
          &:after {
            content: '';
            background: var(--primary_color_1);
            position: absolute;
            width: 200%;
            height: 100%;
            left: 100%;
            top: 0;
            z-index: -1;
          }
        }

        .button {
          display: inline-block;
          font-size: 1.375rem;
        }
      }
    }
  }
}
@media (max-width: 767px) {
  .page-node-type-subsidiary,
  .page-node-type-persona,
  .page-node-type-page {
    .field.field--name-field-body-persona,
    .field.field--name-field-body-page {
      padding: 0 1.25rem;
    }
    article {
      header {
        .row {
          flex-direction: column;
        }
        [class^='col'] {
          flex: 0 0 auto;
          &:first-child {
            &:after {
              left: 25px;
            }
          }
          &:last-child {
            order: -1;
          }
        }
        h1 {
          padding-left: 0.625rem;
        }
      }
      .field--name-field-body-txt {
        ul {
          padding-left: 40px;
        }
      }
      .field--type-paragraph-0
        .paragraph--type--text-photo-w-title
        [class^='col']:first-child {
        padding-right: 0px;
      }
    }
  }
}

@media (max-width: 991px) {
  .page-node-type-subsidiary,
  .page-node-type-persona,
  .page-node-type-page {
    article {
      .field--type-paragraph-0
        .paragraph--type--text-photo-w-title
        [class^='col']:last-child {
        padding-left: 0px;
        margin-top: 1.875rem;
      }
    }
  }
}
