.hero {
  position: relative;
  max-width: 1600px;
  margin-right: auto;
  margin-left: auto;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(
      95.97% 95.97% at 50% 100%,
      #f2f2f3 0%,
      rgba(242, 242, 243, 0) 100%
    );

    @media (--medium-up) {
      border-radius: 6px;
      left: 24px;
      right: 24px;
    }
  }
}

.container {
  @media (--medium-up) {
    display: grid;
    grid-template-columns: 1fr max-content 1fr;
    gap: 32px;
  }
}

.pattern {
  margin-left: 24px;
  transform: translateY(24px);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  @media (--small) {
    display: none;
  }

  @media (--medium) {
    & > * {
      display: none !important;
    }
  }
}

.content {
  position: relative;
  max-width: 520px;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding: 64px 24px;

  @media (--medium-up) {
    padding-top: 132px;
    padding-bottom: 132px;
  }
}

.eyebrow {
  margin: 0;
  composes: g-type-label-strong from global;
}

.heading {
  margin: 24px 0;
  composes: g-type-display-1 from global;
}

.description {
  margin: 0;
  composes: g-type-body-large from global;
  color: var(--gray-2);
}