/* ============================================
   Block: Major Text
   ============================================ */

.block-major-text {
  text-align: center;

  & .heading {
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin-bottom: var(--space-xs);
  }

  & .subtitle {
    color:var(--color-red);
    max-width: 600px;
    margin: 0 auto;
  }

  & .decoration {
    display: grid;
    grid-template-columns: repeat(20, 1fr);
    grid-template-rows: repeat(2, 1fr);
    width: fit-content;
    margin: 0 auto var(--space-md);

    & span {
      display: block;
      width: 12px;
      height: 12px;
      opacity: 0;

      &.white {
        background: #fff;
      }

      &.red {
        background: var(--color-red);
      }
    }

    &.is-animating span {
      opacity: 1;
      transition: opacity 0s calc(var(--i) * 40ms);
    }
  }

  &.pt-sm { padding-top: var(--space-sm); }
  &.pt-md { padding-top: var(--space-md); }
  &.pt-lg { padding-top: var(--space-lg); }
  &.pt-xl { padding-top: var(--space-xl); }

  &.pb-sm { padding-bottom: var(--space-sm); }
  &.pb-md { padding-bottom: var(--space-md); }
  &.pb-lg { padding-bottom: var(--space-lg); }
  &.pb-xl { padding-bottom: var(--space-xl); }
}