.care-team-section-2-column {
  overflow: visible;
  background-color: #f8f4f1;
  color: var(--color-darkblue);
  margin-top: 80px;

  .outer-wrapper {
    display: flow-root;
    background-color: inherit;
  }

  .inner-wrapper {
    position: relative;
    z-index: 1;
    display: grid;
    width: calc(100% - 80px);
    margin-inline: auto;

    @media (min-width: 768px) {
      grid-template-columns: minmax(220px, 360px) minmax(0, 1fr);
      grid-template-rows: auto auto minmax(0, 1fr);
      column-gap: 32px;
      width: min(calc(100% - 76px), 1260px);
      margin-top: -64px;
    }

    .content {
      grid-row: 1;
      min-width: 0;
      margin-top: 64px;
      text-align: center;

      @media (min-width: 768px) {
        grid-column: 1;
        grid-row: 1;
        align-self: start;
        margin-top: 128px;
        text-align: left;
      }

      h3:not(.care-team-modal__name) {
        color: var(--color-darkblue);
        font-family: var(--font-worksans);
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        letter-spacing: 0.5px;
      }

      h2 {
        max-width: 360px;
        margin-inline: auto;
        color: var(--color-blue);
        font-family: var(--font-lora);
        font-size: 32px;
        font-weight: 400;
        line-height: 40px;
        letter-spacing: -0.64px;

        @media (min-width: 768px) {
          margin-inline: 0;
          font-size: 48px;
          line-height: 56px;
          letter-spacing: -0.96px;
        }
      }

      .primary-button {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-top: 32px;

        @media (min-width: 768px) {
          display: inline-flex;
          width: auto;
        }
      }
    }

    .care-team__arrows {
      display: flex;
      grid-row: 3;
      justify-content: space-between;
      gap: 16px;
      margin-top: 32px;

      @media (min-width: 768px) {
        grid-column: 1;
        grid-row: 2;
        align-self: start;
        justify-content: flex-start;
        margin-top: 96px;
      }

      .care-team__arrow {
        display: inline-flex;
        width: 32px;
        aspect-ratio: 1;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 50%;
        padding: 0;
        background: transparent;
        cursor: pointer;
        transition:
          opacity 150ms ease,
          transform 150ms ease;

        &:hover:not(:disabled),
        &:focus-visible {
          transform: scale(1.08);
        }

        &:focus-visible {
          outline: 2px solid var(--color-ctablue);
          outline-offset: 3px;
        }

        &:disabled {
          cursor: default;
          opacity: 0.4;
        }

        svg {
          display: block;
          width: 100%;
          height: auto;
        }
      }
    }

    .care-team-slider {
      grid-row: 2;
      min-width: 0;
      width: calc(100% + 40px);
      margin-top: 32px;
      visibility: visible;

      @media (min-width: 768px) {
        grid-column: 2;
        grid-row: 1 / 4;
        align-self: stretch;
        width: calc(
          100% + clamp(38px, calc((100vw - 1260px) / 2), 180px)
        );
        margin-top: 0;
      }

      .splide__track {
        height: 100%;
        overflow: hidden;
      }

      .care-team {
        height: 100%;
        margin: 0;
        padding: 0;
        list-style: none;

        .care-team__member {
          position: relative;
          min-width: 0;
          aspect-ratio: 3 / 4;
          overflow: hidden;
          border-radius: 8px;
          background-color: var(--color-blue);

          .care-team__trigger {
            position: relative;
            display: block;
            width: 100%;
            height: 100%;
            overflow: hidden;
            border: 0;
            padding: 0;
            background-color: transparent;
            color: var(--color-white);
            text-align: left;
            cursor: pointer;

            &::after {
              position: absolute;
              z-index: 1;
              inset: 0;
              background: linear-gradient(
                180deg,
                rgb(9 17 41 / 0%) 42%,
                rgb(9 17 41 / 72%) 100%
              );
              content: "";
            }

            &:hover,
            &:focus-visible {
              .care-team__headshot {
                transform: scale(1.035);
              }

              .care-team__view-bio {
                text-decoration-color: currentColor;
              }
            }

            &:focus-visible {
              outline: 3px solid var(--color-ctablue);
              outline-offset: -3px;
            }

            .care-team__headshot {
              position: absolute;
              inset: 0;
              width: 100%;
              height: 100%;
              max-width: none;
              object-fit: cover;
              transition: transform 300ms ease;
            }

            .care-team__card-content {
              position: absolute;
              z-index: 2;
              inset-inline: 24px;
              bottom: 24px;
              display: grid;
              gap: 4px;

              @media (min-width: 768px) {
                inset-inline: 32px;
                bottom: 32px;
              }

              .care-team__name {
                display: block;
                font-family: var(--font-lora);
                font-size: 24px;
                font-weight: 400;
                line-height: 32px;

                @media (min-width: 768px) {
                  font-size: 26px;
                  line-height: 34px;
                }
              }

              .care-team__view-bio {
                display: block;
                font-family: var(--font-worksans);
                font-size: 16px;
                font-weight: 400;
                line-height: 24px;
                text-decoration: underline;
                text-decoration-color: transparent;
                text-underline-offset: 3px;
                transition: text-decoration-color 150ms ease;
              }
            }
          }
        }
      }
    }
  }
}

body.care-team-modal-is-open {
  overflow: hidden;
}

.care-team-modal {
  width: min(calc(100% - 32px), 1140px);
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  overflow: auto;
  border: 0;
  border-radius: 8px;
  padding: 0;
  background-color: var(--color-white);
  color: var(--color-darkblue);
  box-shadow: 0 24px 64px rgb(9 17 41 / 28%);

  @media (min-width: 768px) {
    width: min(calc(100% - 76px), 1140px);
  }

  &::backdrop {
    background-color: rgb(9 17 41 / 55%);
  }

  .care-team-modal__panel {
    position: relative;
    background-color: var(--color-white);

    .care-team-modal__close {
      position: absolute;
      z-index: 2;
      top: 16px;
      right: 16px;
      display: inline-flex;
      width: 32px;
      aspect-ratio: 1;
      align-items: center;
      justify-content: center;
      border: 0;
      border-radius: 50%;
      padding: 0;
      background-color: var(--color-white);
      cursor: pointer;
      transition: transform 150ms ease;

      &:hover,
      &:focus-visible {
        transform: scale(1.08);
      }

      &:focus-visible {
        outline: 2px solid var(--color-ctablue);
        outline-offset: 3px;
      }

      svg {
        display: block;
        width: 100%;
        height: auto;
      }
    }

    .care-team-modal__body {
      display: grid;
      gap: 24px;
      padding: 64px 20px 24px;

      @media (min-width: 768px) {
        grid-template-columns: minmax(240px, 328px) minmax(0, 1fr);
        align-items: center;
        gap: 32px;
        padding: 32px;
      }

      .care-team-modal__media {
        position: relative;
        width: 100%;
        aspect-ratio: 1;
        overflow: hidden;
        border-radius: 8px;

        .care-team-modal__headshot {
          position: absolute;
          inset: 0;
          display: block;
          width: 100%;
          height: 100%;
          max-width: none;
          object-position: top;
          object-fit: cover;
        }
      }

      .care-team-modal__content {
        min-width: 0;
        padding-right: 0;

        @media (min-width: 768px) {
          padding-right: 32px;
        }

        .care-team-modal__name {
          color: var(--color-black);
          font-family: var(--font-lora);
          font-size: 32px;
          font-weight: 400;
          line-height: 40px;
          letter-spacing: -0.64px;

          @media (min-width: 768px) {
            font-size: 40px;
            line-height: 48px;
            letter-spacing: -0.8px;
          }
        }

        .care-team-modal__job-title {
          margin-top: 8px;
          color: var(--color-black);
          font-family: var(--font-worksans);
          font-size: 20px;
          font-weight: 400;
          line-height: 28px;

          @media (min-width: 768px) {
            font-size: 24px;
            line-height: 32px;
          }
        }

        .care-team-modal__bio {
          margin-top: 24px;
          color: var(--color-black);
          font-family: var(--font-worksans);
          font-size: 16px;
          font-weight: 400;
          line-height: 24px;

          p {
            font: inherit;
          }

          p + p {
            margin-top: 16px;
          }
        }
      }
    }

    .care-team-modal__footer {
      position: sticky;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 16px 20px;
      background-color: var(--color-white);
      box-shadow: 0 -4px 16px rgb(9 17 41 / 10%);

      @media (min-width: 768px) {
        padding: 20px 32px;
      }

      .care-team-modal__count {
        margin: 0;
        color: var(--color-black);
        font-family: var(--font-worksans);
        font-size: 14px;
        font-weight: 500;
        line-height: 24px;

        @media (min-width: 768px) {
          font-size: 16px;
        }
      }

      .care-team-modal__arrows {
        display: flex;
        gap: 16px;

        .care-team-modal__arrow {
          display: inline-flex;
          width: 32px;
          aspect-ratio: 1;
          align-items: center;
          justify-content: center;
          border: 0;
          border-radius: 50%;
          padding: 0;
          background: transparent;
          cursor: pointer;
          transition:
            opacity 150ms ease,
            transform 150ms ease;

          &:hover:not(:disabled),
          &:focus-visible {
            transform: scale(1.08);
          }

          &:focus-visible {
            outline: 2px solid var(--color-ctablue);
            outline-offset: 3px;
          }

          &:disabled {
            cursor: default;
            opacity: 0.4;
          }

          svg {
            display: block;
            width: 100%;
            height: auto;
          }
        }
      }
    }
  }
}