#hero {
  container: hero / inline-size;

  inner-wrapper {
    padding-block: var(--fs-times-8);

    h2 {
      padding-block-end: var(--fs);
      margin-block-end: var(--fs);
      border-block-end: 1px solid var(--white-shade-4);
    }
  }
}

#under-construction {
  inner-wrapper {
    padding-block-start: var(--fs-times-7);
    padding-block-end: calc(2 * var(--fs-times-8));

    h2 {
      grid-column: 1 / -1;
      font-size: 4.931vw;
      letter-spacing: calc(4.931vw * -1 * 0.03);
      text-transform: uppercase;
      font-weight: 500;
    }

    animation-banner {
      display: block;
      grid-column: 1 / -1;
      width: 100%;
    }
  }
}

#blog-table {
  container: blog-table / inline-size;

  inner-wrapper {
    padding-block-start: var(--fs);

    ul {
      li {
        a {
          display: block;
          padding-block: var(--fs);
          border-block-end: 1px solid var(--white-shade-4);

          &:hover {
            background-color: inherit;
            color: inherit;
          }
        }
      }
    }
  }
}

/* grid */

#hero {
  inner-wrapper {
    h2 {
      grid-column: 1 / -1;
    }

    p:nth-child(2) {
      grid-column: 1 / span 4;
    }

    p:nth-child(3) {
      grid-column: 5 / span 4;
    }
  }

  @container (inline-size < 60rem) {
    inner-wrapper {
      p:nth-child(3) {
        grid-column: 5 / -1;
      }
    }
  }
}

#blog-table {
  inner-wrapper {
    ul {
      grid-column: 5 / span 7;
    }
  }

  @container (inline-size < 60rem) {
    inner-wrapper {
      ul {
        grid-column: 5 / -1;
      }
    }
  }

  @container (inline-size < 28.125rem) {
    inner-wrapper {
      ul {
        grid-column: 1 / -1;
      }
    }
  }
}