@use 'sass:map';

@use '_core/mixins' as *;

$tablet: map.get($breakpoints, 'tablet') - 1;

article {
  padding: var(--space-standard);
  max-width: 25em;

  p {
    margin-bottom: 1em;
  }

  u {
    text-decoration: underline;
  }

  > h1 {
    font-size: 1.6em;
  }

  > h2 {
    font-size: 1.5em;
  }

  > h3 {
    font-size: 1.375em;
  }

  > h4 {
    font-size: 1.25em;
  }

  > h5 {
    font-size: 1.125em;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: bold;
    margin: 1.2rem 0;
  }
}

@media (max-width: $tablet), (hover: none) {
  article {
    margin-top: var(--nav-height);
  }
}