.paragraph {
  &.row + .paragraph.row {
    margin-top: 20px;
  }
  &.bg-purple {
    background: #F5F0FB;
  }
  &.bg-white {
    background: #FFF;
  }
  &.bg-banner {
    position: relative;
    background: url(/themes/custom/xywavxyremrems/img/swoosh.png) center center no-repeat;
    background-size: cover;
    padding-top: 40px;
    padding-bottom: 140px;
    padding-left: 8px;
    padding-right: 8px;
    .scroll-down {
      position: absolute;
      bottom: 20px;
      left: 0;
      width: 100%;
      padding-left: 20px;
      padding-right: 20px;
      color: #7147BD;
      @media screen and (max-width: 767px) {
        font-size: 12px;
        bottom: 40px;
      }
    }
    @media screen and (min-width: 768px) {
      padding-top: 100px;
      padding-bottom: 100px;
      padding-left: 0;
      padding-right: 0;
      .scroll-down {
        position: relative;
        bottom: inherit;
        padding-left: 0;
        padding-right: 0;
      }
    }
    @media screen and (max-width: 767px) {
      background:
        url("/themes/custom/xywavxyremrems/img/swoosh-mobile.png") top/cover no-repeat,
        url("/themes/custom/xywavxyremrems/img/swoosh-mobile-container.png") top/cover no-repeat;
      background-size: cover, cover;
      background-position: center -162px, center;
      padding-top: 60px;
    }
  }
  &.rounded-top {
    border-radius: 30px 30px 0px 0px !important;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 40px;
    /*Extra for overlap*/
    padding-bottom: 70px;
    + .paragraph {
      margin-top: -30px;
    }
    &:last-child {
      padding-bottom: 40px;
    }
    @media screen and (min-width: 768px) {
      padding-left: 0;
      padding-right: 0;
      padding-top: 60px;
      /*Extra for overlap*/
      padding-bottom: 90px;
      + .paragraph {
        margin-top: -30px;
      }
      &:last-child {
        padding-bottom: 60px;
      }
    }
  }
  &.border-top-gradient {
    position: relative;
    padding: 40px 8px;
    margin-left: auto;
    margin-right: auto;
    @media screen and (min-width: 768px) {
      padding: 40px 30px;
    }
    @media screen and (max-width: 767px) {
      .paragraph.col {
        width: 100%;
        margin-bottom: 20px;
        &:nth-child(2) {
          margin-bottom: 0;
        }
        a.button {
          display: flex;
        }
      }
      .paragraph.row {
        &:last-child {
          margin-top: 0;
        }
      }
    }
    &:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 6px;
      background: var(--Accent, linear-gradient(90deg, #E62336 0%, #AE95DA 43%, #FFBF3D 100%));
    }
    .paragraph.col {
      max-width: 620px;
    }
    .text-right {
      text-align: right;
    }
    /* Mail/Fax/Call sections. */
    .hr-top {
      margin-top: 40px;
      border-top: 2px solid rgba(0, 0, 0, 0.20);
      padding-top: 40px;
      @media screen and (max-width: 767px) {
        flex-direction: column;
      }
      .or {
        padding: 8px 0;
        color: #775CBF;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 24px; /* 171.429% */
        letter-spacing: 1.4px;
        text-transform: uppercase;
        @media screen and (min-width: 768px) {
          padding: 32px 8px 0;
        }
      }
      &.gap-3 {
        @media screen and (min-width: 768px) {
          gap: 50px !important;
        }
      }
    }
    a[href^="mailto:"] {
      text-decoration: none;
      color: #3E3935;
    }
  }
  &.paragraph--type--copy {
    p:last-child {
      margin: 0;
    }
  }
  &.card {
    border-radius: 30px;
    border: 1px solid #AE95DA;
    margin-bottom: 20px;
    @media screen and (min-width: 768px) {
      min-height: 260px;
    }
    .card-header {
      border-radius: 30px 30px 0px 0px;
      border: none;
      border-bottom: 1px solid #AE95DA;
      background: linear-gradient(256deg, #AE95DA -24.33%, #7147BD 96.38%);
      padding: 20px 30px;
      color: #fff;
      font-size: 34px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
      @media screen and (max-width: 767px) {
        font-size: 30px;
        line-height: 37px;
        padding: 40px 20px 20px;
      }
    }
    .card-body {
      padding: 30px 30px;
      .report-adverse-events {
        gap: 0.5rem;
        @media screen and (max-width: 1200px) {
          .col-sm {
            display: flex;
            flex-direction: column;
          }
        }
        @media screen and (max-width: 767px) {
          gap: 40px !important;
          p {
            line-height: 16px;
          }
        }
        @media screen and (min-width: 1200px) {
          .col-sm:first-child {
            min-width: 240px;
          }
          .col-sm:last-child {
            min-width: 216px;
          }
        }
      }
      .col-contact {
        @media screen and (max-width: 767px) {
          display: flex;
          flex-direction: column;
          gap: 10px;
          line-height: 20px;
          font-size: 16px;
        }
      }
      .contact {
        .col-sm:last-child {
          p {
            margin-bottom: 0;
          }
        }
        @media screen and (max-width: 1200px) {
          .col-sm {
            display: flex;
            flex-direction: column;
            gap: 14.5px;
          }
          gap: 20px !important;
        }
        @media screen and (min-width: 1200px) {
          .col-sm:first-child {
            min-width: 275px;
          }
        }
      }
      @media screen and (max-width: 767px) {
        padding: 40px 20px;
      }
    }
  }
  &.jump-links {
    margin-top: -30px;
    margin-right: 8px;
    margin-left: 8px;
    @media screen and (min-width: 768px) {
      margin-right: 0;
      margin-left: 0;
    }
    .paragraph.row {
      position: relative;
      padding-top: 30px;
      padding-bottom: 30px;
      &:after {
        content: '';
        position: absolute;
        top: 0;
        left: calc(var(--bs-gutter-x) * 0.5);
        right: calc(var(--bs-gutter-x) * 0.5);
        border-top: 2px solid rgba(0, 0, 0, 0.20);
      }
      @media screen and (max-width: 767px) {
        padding-top: 50px;
      }
    }
    .field.field--name-field-body {
      font-size: 18px;
      font-weight: 700;
      color: #7D55C7;
      p {
        padding-right: 25px;
      }
      @media screen and (min-width: 768px) {
        display: flex;
      }
      ol {
        color: #000;
        font-weight: 600;
        margin: 0;
        padding: 0;
        list-style-position: inside;
        display: flex;
        flex-direction: column;
        gap: 25px;
        @media screen and (min-width: 768px) {
          flex-direction: row;
        }
        li {
          padding-left: 0;
          a {
            color: #000;
            &:hover {
              /* color: #7D55C7; */
              color: #F93549;
            }
          }
        }
      }
    }
  }
  &.justify-content-center {
    justify-content: center !important;
  }
  &.patients-and-caregivers {
  }
  @media screen and (min-width: 768px) {
    &.max-w-470 {
      max-width: 470px;
    }
  }
  &.fancy-ol {
    counter-reset: section;
    margin-top: 30px;
    @media screen and (min-width: 768px) {
      margin-top: 0;
    }
    .paragraph--type--copy {
      position: relative;
      padding-left: 70px;
      margin-bottom: 40px;
      max-width: 530px;
      h3 {
        margin-bottom: 15px;
      }
      @media screen and (min-width: 768px) {
        padding-left: 90px;
        margin-bottom: 20px;
      }
      margin-top: 0;
      &:before {
        counter-increment: section;
        content: counter(section);
        width: 50px;
        height: 50px;
        /* background: linear-gradient(190deg,#AE95DA, #7147BD); */
        background: linear-gradient(256deg, #AE95DA 36.03%, #7147BD 96.38%);
        color: #fff;
        font-weight: 600;
        border-radius: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        left: 0;
      }
      &:after {
        content: '';
        width: 26px;
        border-right: 2px solid rgba(0, 0, 0, 0.20);
        position: absolute;
        top: 66px;
        left: 0;
        bottom: 0;
      }
      &:last-of-type:after {
        display: none;
      }
      @media screen and (max-width: 767px) {
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
  &.contact-row {
    @media screen and (max-width: 767px) {
      .col:last-child {
        .card {
          margin-bottom: 0;
        }
      }
    }
  }
}