
.layout-container {

  /* --- Pull quote layout -------------------------------------------------- */

  .patient-testimonial--quote {
    --band-space-block-start: 40px;
    --band-space-block-end: 40px;
    overflow-x: clip;
    overflow-y: visible;
  }

  .patient-testimonial--quote .quote {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    overflow: visible;
  }

  .patient-testimonial--quote .quote__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
  }

  .patient-testimonial--quote .quote__piping-row {
    display: flex;
    align-items: center;
    gap: 24px;
  }

  .patient-testimonial--quote .quote__piping {
    width: 106px;
    height: 29.278px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .patient-testimonial--quote .quote__piping-inner {
    width: 29.278px;
    height: 106px;
    overflow: hidden;
    position: relative;
    transform: rotate(90deg);
  }

  .patient-testimonial--quote .quote__piping-inner img {
    position: absolute;
    width: 172.14%;
    height: 117.52%;
    left: -38.97%;
    top: -9.07%;
    max-width: none;
  }

  .patient-testimonial--quote .quote__mark {
    width: 30px;
    height: 76px;
    flex: none;
    position: relative;
  }

  .patient-testimonial--quote .quote__mark--desktop {
    display: none;
  }

  .patient-testimonial--quote .quote__mark-inner {
    position: absolute;
    left: -22px;
    top: 1.14px;
    width: 84.001px;
    height: 75.211px;
    overflow: hidden;
    transform: scaleX(-1);
  }

  .patient-testimonial--quote .quote__mark-inner img {
    position: absolute;
    width: 100%;
    height: 116.11%;
    left: 1.16%;
    top: -0.26%;
    max-width: none;
  }

  .patient-testimonial--quote .quote__text {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font-style: normal;
    font-family: var(--font-tilt-neon, 'tilt-neon', Georgia, serif);
    font-weight: 400;
    font-size: 24px;
    line-height: 1.25;
    color: var(--color-dark-coral, #c94808);
    text-align: center;
    width: 100%;
  }

  .patient-testimonial--quote .quote__attribution {
    font-family: var(--font-agenda, 'Agenda', Arial, sans-serif);
    font-size: var(--size-body, 20px);
    font-weight: var(--font-weight-normal, 400);
    line-height: normal;
    color: var(--color-charcol, #1d2d3a);
    text-align: center;
    width: 100%;
  }

  .patient-testimonial--quote .quote__portrait {
    position: relative;
    width: 325px;
    height: 331px;
    flex: none;
    margin-bottom: 19px;
    overflow: visible;
  }

  .patient-testimonial--quote .quote__portrait-art {
    position: absolute;
    left: calc(50% + 2.03px);
    top: -158.18px;
    width: 621.795px;
    height: 621.795px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 0;
  }

  .patient-testimonial--quote .quote__portrait-art img {
    width: 456.596px;
    height: 456.596px;
    max-width: none;
    transform: rotate(-150.65deg) scaleY(-1);
  }

  .patient-testimonial--quote .quote__portrait-photo {
    position: absolute;
    left: 30.28px;
    top: 70.3px;
    width: 247.665px;
    height: 206.539px;
    z-index: 1;
    overflow: hidden;
    -webkit-mask-image: url("../../images/decorative/headshot-mask.svg");
    mask-image: url("../../images/decorative/headshot-mask.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 242.941px 242.941px;
    mask-size: 242.941px 242.941px;
    -webkit-mask-position: -4.379px -39.396px;
    mask-position: -4.379px -39.396px;
    overflow: visible;
  }

  .patient-testimonial--quote .quote__portrait-photo img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
  }

  .patient-testimonial--quote .quote__caption {
    position: absolute;
    top: 100%;
    left: calc(50% - 97.5px);
    width: 195px;
    margin: 0;
    z-index: 2;
    font-family: var(--font-agenda, 'Agenda', Arial, sans-serif);
    font-size: var(--size-footnote, 16px);
    font-weight: var(--font-weight-normal, 400);
    line-height: normal;
    color: var(--color-text-secondary, #515861);
    text-align: center;
  }

  /* --- Card layout -------------------------------------------------------- */

  .patient-testimonial--card {
    width: 100%;
  }

  .patient-testimonial--card .patient-testimonial__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    overflow: hidden;
    background:
      linear-gradient(var(--color-white, #ffffff), var(--color-white, #ffffff)) padding-box,
      var(--silver-gradient) border-box;
    border: 8px solid transparent;
    border-radius: var(--radius-2xl, 24px);
    padding: 32px 16px;
    min-height: 586px;
    box-shadow: none;
  }


  .patient-testimonial--card .patient-testimonial__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }

  .patient-testimonial--card .patient-testimonial__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
  }

  .patient-testimonial--card .patient-testimonial__title {
    margin: 0;
    width: 100%;
    font-family: var(--font-agenda, 'Agenda', Arial, sans-serif);
    font-size: var(--size-h4, 26px);
    font-weight: var(--font-weight-bold, 700);
    line-height: normal;
    color: var(--color-charcol, #1d2d3a);
    text-align: left;
  }

  .patient-testimonial--card .patient-testimonial__text {
    margin: 0;
    width: 100%;
    font-family: var(--font-agenda, 'Agenda', Arial, sans-serif);
    font-size: var(--size-body, 20px);
    font-weight: var(--font-weight-normal, 400);
    line-height: normal;
    color: var(--color-steel, #515861);
    text-align: left;
  }

  .patient-testimonial--card .patient-testimonial__cta {
    width: 100%;
    .btn__icon.arrow {
      height: 24px;
    }
    &:hover {
      color: white;
    }
  }

  .patient-testimonial--card .patient-testimonial__portrait {
    position: absolute;
    z-index: 0;
    width: 485.761px;
    height: 477.62px;
    left: -65.38px;
    top: 331px;
  }

  .patient-testimonial--card .patient-testimonial__portrait-art {
    position: absolute;
    pointer-events: none;
    left: -95.17px;
    top: -72.81px;
    width: 681.499px;
    height: 681.499px;
  }

  .patient-testimonial--card .patient-testimonial__portrait-art img {
    width: 100%;
    height: 100%;
    max-width: none;
    transform: rotate(-119.8deg) scaleY(-1);
  }

  .patient-testimonial--card .patient-testimonial__portrait-photo {
    position: absolute;
    left: 45.2px;
    top: -19px;
    width: 369.655px;
    height: 308.273px;
    overflow: visible;
  }

  .patient-testimonial--card .patient-testimonial__portrait-photo img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
  }

  .patient-testimonial--card .patient-testimonial__caption {
    position: absolute;
    z-index: 1;
    left: calc(50% - 115.5px);
    top: 220px;
    transform: translateY(-50%);  
    margin: 0;
    white-space: nowrap;
    font-family: var(--font-agenda, 'Agenda', Arial, sans-serif);
    font-size: var(--size-footnote, 16px);
    font-weight: var(--font-weight-normal, 400);
    line-height: normal;
    color: var(--color-white, #ffffff);
  }

  @media (min-width: 768px) {

    .patient-testimonial--quote {
      --band-space-block-start: 80px;
      --band-space-block-end: 80px;
      margin-top: 100px;
    }

    .patient-testimonial--quote .quote {
      display: block;
    }

    .patient-testimonial--quote .quote__body {
      width: 868px;
      max-width: calc(100% - 332px);
      align-items: flex-start;
      gap: 12px;
    }

    .patient-testimonial--quote .quote__piping-row {
      display: none;
    }

    .patient-testimonial--quote .quote__text,
    .patient-testimonial--quote .quote__attribution {
      text-align: left;
    }

    .patient-testimonial--quote .quote__mark--desktop {
      display: block;
      position: absolute;
      left: -55px;
      top: -26px;
    }

    .patient-testimonial--quote .quote__portrait {
      position: absolute;
      top: -157px;
      right: -4px;
      left: auto;
      width: 311px;
      height: 337px;
      margin-bottom: 0;
    }

    .patient-testimonial--quote .quote__portrait-art {
      left: calc(50% + 1.83px);
      top: -151.26px;
      width: 594.592px;
      height: 594.592px;
    }

    .patient-testimonial--quote .quote__portrait-art img {
      width: 436.62px;
      height: 436.62px;
    }

    .patient-testimonial--quote .quote__portrait-photo {
      left: 28.96px;
      top: 67.23px;
      width: 236.829px;
      height: 197.503px;
      -webkit-mask-size: 232.313px 232.313px;
      mask-size: 232.313px 232.313px;
      -webkit-mask-position: -4.184px -37.672px;
      mask-position: -4.184px -37.672px;
    }

    .patient-testimonial--quote .quote__caption {
      top: 318px;
    }

    .patient-testimonial--card .patient-testimonial__card {
      flex-direction: row;
      align-items: center;
      gap: 40px;
      width: 800px;
      max-width: 100%;
      height: 315px;
      min-height: 0;
      padding: 32px;
      margin-inline: auto;
      box-shadow: var(--shadow-card, 0 8px 24px -4px rgba(81, 88, 97, 0.16));
    }

    .patient-testimonial--card .patient-testimonial__body {
      width: 402px;
      flex: none;
    }

    .patient-testimonial--card .patient-testimonial__copy {
      align-items: flex-start;
    }

    .patient-testimonial--card .patient-testimonial__cta {
      width: auto;
    }

    .patient-testimonial--card .patient-testimonial__portrait {
      left: 456px;
      top: -78px;
    }

    .patient-testimonial--card .patient-testimonial__portrait-art {
      top: -112.815px;
    }

    .patient-testimonial--card .patient-testimonial__portrait-art img {
      transform: rotate(-150.65deg) scaleY(-1);
    }

    .patient-testimonial--card .patient-testimonial__portrait-photo {
      left: 38.667px;
      top: 46.129px;
      width: 362.605px;
      height: 362.605px;
      border-radius: 50%;
      overflow: hidden;
    }

    .patient-testimonial--card .patient-testimonial__portrait-photo img {
      position: absolute;
      left: 6.533px;
      top: 58.801px;
      width: 369.655px;
      height: 308.273px;
    }

    .patient-testimonial--card .patient-testimonial__caption {
      left: 120px;
      top: 350px;
      transform: none;
    }
  }

}

@media (min-width: 490px) and (max-width: 767px) {
  .layout-container .patient-testimonial--card .patient-testimonial__portrait {
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .layout-container .patient-testimonial--card .patient-testimonial__body {
    width: 48%;
  }

  .layout-container .patient-testimonial--card .patient-testimonial__portrait {
    left: unset;
    right: -157px;
  }
}
