/*
 * Talent Module
 * ========================================================================
 * Styles for various talent-based UI components including alerts, loaders,
 * empty talents, and other dynamic UI talents.
 */

/* ==========================================================================
   Base talent Component Styles
   ========================================================================== */

.talent-page-section {
  padding: 3.75rem 0;
  background-position:
    left top,
    bottom right 6.25rem;
  background-repeat: no-repeat, no-repeat;

  @media (max-width: 90rem) {
    background-size: 30rem, auto;
  }
  @media (max-width: 64rem) {
    background-size: 20rem, auto;
  }

  @media (max-width: 61.99875rem) {
    padding: 3.125rem 0;
    background-image: none !important;
  }
}

.top-left-content {
  text-align: right;
  font-weight: 400;
  font-size: 2.5rem;
  line-height: 3.4375rem;
  margin-bottom: 6.875rem;

  @media (max-width: 61.99875rem) {
    margin-bottom: 5.625rem;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: 400;
    font-size: 2.5rem;
    line-height: 3.4375rem;
    margin-bottom: 0;
  }

  span {
    color: var(--bs-primary);
  }

  .font-serif {
    font-size: 3.4375rem;
    line-height: 3.4375rem;
    font-weight: 400;
  }

  @media (max-width: 61.99875rem) {
    font-size: 1.625rem;
    line-height: 2.3125rem;
    .font-serif {
      font-size: 2.3125rem;
      line-height: 2.3125rem;
    }
    br {
      display: none;
    }
  }
}

.bottom-left-content {
  text-align: left;
  font-weight: 400;
  font-size: 2.5rem;
  line-height: 3.438rem;
  margin-top: 6.875rem;

  @media (max-width: 61.99875rem) {
    margin-top: 5.625rem;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: 400;
    font-size: 2.5rem;
    line-height: 3.438rem;
    margin-bottom: 0;
  }

  span {
    color: var(--bs-primary);
  }

  .font-serif {
    font-size: 3.438rem;
    line-height: 3.438rem;
    font-weight: 400;
  }
  @media (max-width: 61.99875rem) {
    font-size: 2.125rem;
    line-height: 2.875rem;
    .font-serif {
      font-size: 2.5rem;
      line-height: 2.875rem;
    }
    br {
      display: none;
    }
  }
}

.left-content,
.right-content {
  border-radius: 1.25rem;
  padding: 4.375rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  @media (max-width: 61.99875rem) {
    padding: 4.375rem 1.25rem;
  }
}
.left-content {
  .talent-left-tag {
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.25rem;
    text-transform: uppercase;
  }
  .talent-left-title {
    font-size: 2.5rem;
    line-height: 3.438rem;
    font-weight: 400;
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-size: 2.5rem;
      line-height: 3.438rem;
      font-weight: 400;
    }
    p {
      margin-bottom: 0;
    }
    span {
      color: var(--bs-primary);
    }

    .font-serif {
      font-size: 3.438rem;
      line-height: 3.438rem;
      font-weight: 400;
    }
    @media (max-width: 61.99875rem) {
      font-size: 2.5rem;
      line-height: 3.438rem;
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        font-size: 2.5rem;
        line-height: 3.438rem;
      }
      .font-serif {
        font-size: 2.5rem;
        line-height: 3.438rem;
      }
    }
  }

  .talent-left-description {
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--bs-gray-600);
    strong {
      color: var(--bs-gray-800);
    }
  }
}

.right-content {
  .talent-right-tag {
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.25rem;
    text-transform: uppercase;
  }
  .talent-right-title {
    font-size: 1.5rem;
    line-height: 2.125rem;
    font-weight: 700;
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-size: 1.5rem;
      line-height: 2.125rem;
      font-weight: 700;
    }

    span {
      color: var(--bs-primary);
    }

    .font-serif {
      font-size: 1.75rem;
      line-height: 2.125rem;
      font-weight: 400;
    }
  }

  .talent-right-description {
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--bs-gray-600);
    strong {
      color: var(--bs-gray-800);
    }
  }
}