.about {
  display: flex;
  flex-direction: column;
  gap: 2rem;

  .about-quote {
    text-align: center;
    font-size: .9rem;
    font-weight: 700;
    text-transform: uppercase;
    font-style: italic;
    opacity: 0.85;

    span {
      font-style: normal;
      opacity: 0.9;
    }
  }

  .about-intro {
    text-align: center;
    font-size: .9rem;
    margin: 1rem auto;
    max-width: calc(var(--viewport-width) / 1.25);
  }

  .hero-mental {
    padding: .5rem 2rem;
    margin: var(--component-padding) auto;
    border-left: .25rem solid rgba(var(--color-accent), 0.75);
  }

  .about-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    max-width: calc(var(--viewport-width) / 1.25);
    margin: 0 auto;
    transition: var(--transition-default);

    &:hover {
      border-color: rgba(var(--color-accent), .5);
      box-shadow: 0 0 .5rem rgba(var(--color-accent), .5);
      transition: var(--transition-default);

      .about-description {
        opacity: 1;
        transition: var(--transition-default);
      }
    }

    .video-wrapper {
      margin: 0;
    }

    .about-image {
      width: 100%;
      max-width: 100%;
      height: auto;
      max-height: 70dvh;

      object-fit: contain;
      border-radius: 1rem;

      display: block;
      margin-inline: auto;
    }

    .about-title {
      font-size: 1.5rem;
      font-weight: 700;
      text-align: center;
    }

    .about-description {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      padding: 1rem 2rem 2rem;
      font-size: .9rem;
      line-height: 2;
      opacity: .75;
      transition: var(--transition-default);
    }
  }

  p {
    margin: 1rem 0;
    text-align: center;
    line-height: 2;
  }

  b {
    border-bottom: .1rem solid rgba(var(--color-accent), .25);
  }

  i {
    background: rgba(var(--color-accent), .1);
  }

  a {
    font-size: .9rem;
    border-bottom: .1rem solid rgba(var(--color-accent), .5);
    text-decoration: none;
    transform: translateY(0);
  }
}