@import "tailwindcss/theme";
@import "../variables/theme.css";

.heroContent {
  @apply relative z-0 text-white;
}

.heroContent-container {
  @apply flex h-full flex-col;

  gap: var(--spacing-sm-md);
  min-height: 300px;
  padding-block: var(--spacing-sm-margin-section);

  @variant md {
    gap: var(--spacing-md-md);
    min-height: 360px;
    padding-block: var(--spacing-md-margin-section);
  }

  @variant lg {
    @apply flex-row;

    gap: var(--spacing-lg-md);
    padding-block: var(--spacing-lg-margin-section);
  }
}

.heroContent-background {
  @apply absolute top-0 left-0 h-full w-full overflow-hidden;

  z-index: -1;

  &::after {
    @apply absolute top-0 left-0 h-full w-full;

    content: "";
    background:
      linear-gradient(180deg, rgb(34 34 34 / 0%) 0%, #222 100%),
      linear-gradient(0deg, rgb(34 34 34 / 60%) 0%, rgb(34 34 34 / 60%) 100%);
  }
}

.heroContent-heading {
  @apply flex-1/2;

  font: var(--h2-bold);
  font-size: var(--text-heading-sm-lg);
  line-height: var(--leading-heading-sm-lg);

  @variant md {
    font-size: var(--text-heading-md-lg);
    line-height: var(--leading-heading-md-lg);
  }

  @variant lg {
    font-size: var(--text-heading-lg-lg);
    line-height: var(--leading-heading-lg-lg);
  }
}

.heroContent-description {
  @apply flex-1/2;

  font: var(--t3-medium);
}