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

.newsInfo {
  padding-bottom: var(--spacing-sm-sm);

  @variant md {
    padding-bottom: var(--spacing-md-sm);
  }

  @variant lg {
    @apply grid grid-cols-12;

    padding-bottom: var(--spacing-lg-sm);
  }
}

.newsInfo-container {
  @apply grid;

  grid-template-rows: repeat(2, auto);
  grid-template-columns: 100%;
  gap: var(--spacing-sm-xs);

  @variant md {
    gap: var(--spacing-md-xs);
  }

  @variant lg {
    @apply col-span-10 col-start-2;

    gap: var(--spacing-lg-xs);
  }
}

.newsInfo-title {
  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);
  }
}

.newsInfo-date {
  @apply flex items-center;

  gap: var(--spacing-8);

  @variant lg {
    @apply flex-1/3;
  }
}

.newsInfo-icon {
  --icon-color: var(--color-neutral-300);

  @apply flex-none;
}