@layer components {
  .home-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-block-end: var(--space-4);

    @media (min-width: 48rem) {
      margin-block-end: var(--space-6);
    }

    h1 {
      font-size: var(--text-3xl);
      font-weight: 400;
      letter-spacing: 0.025em;
      color: var(--color-text);

      @media (min-width: 48rem) {
        font-size: var(--text-4xl);
      }

      @media (min-width: 64rem) {
        font-size: var(--text-5xl);
      }
    }
  }

  .brand-logo {
    display: inline-block;
    inline-size: 3.75rem;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--color-text-subtle);
    border-radius: 0.25rem;
    background-color: #0e2b6b;
    position: relative;

    &::after {
      content: '';
      display: block;
      position: absolute;
      inset: 10%;
      background-color: var(--color-canvas);
      -webkit-mask-image: url("/assets/logo-sakolabs-836372f4.svg");
      mask-image: url("/assets/logo-sakolabs-836372f4.svg");
      -webkit-mask-size: contain;
      mask-size: contain;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-position: center;
      mask-position: center;
    }
  }

  .intro-text {
    font-size: var(--text-base);
    font-weight: 200;
    margin-block-end: var(--space-6);
    color: var(--color-text);

    @media (min-width: 48rem) {
      font-size: var(--text-lg);
    }

    strong {
      color: var(--color-accent);
      font-weight: bold;
    }
  }

  .col-team {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    h2 {
      font-size: var(--text-lg);
      font-weight: 400;
      letter-spacing: 0.025em;
      margin-block-end: var(--space-6);
      color: var(--color-text);

      @media (min-width: 48rem) {
        font-size: var(--text-xl);
      }
    }
  }
}