body {
  min-block-size: 100dvh;

  display: grid;
  place-items: center;
}

main {
  --link-max-inline-size: 20rem;

  margin: calc(2 * var(--g-padding)) var(--g-padding);
  inline-size: calc(100% - 2 * var(--g-padding));
  max-inline-size: calc(var(--link-max-inline-size) * 3 + 2 * 1.5rem);

  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  gap: 2.5rem;
}

header {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 1.125rem;

  .logo {
    width: 3rem;
    height: 3rem;

    margin-block-end: 0.5rem;
  }

  h1 {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 0.83;
  }

  .blurb {
    font-size: 1rem;
    font-style: italic;
    line-height: 1.4;
    text-align: center;

    display: flex;
    flex-flow: column;
    gap: 0.125rem;
  }
}

#links {
  inline-size: 100%;

  .links-list {
    display: grid;
    grid-auto-rows: min-content;
    grid-template-columns: repeat(
      auto-fit,
      minmax(min(100%, 16rem), var(--link-max-inline-size))
    );
    place-content: center;
    place-items: center;
    gap: 1.5rem;

    list-style: none;

    li {
      block-size: 100%;

      > a {
        display: block;
        block-size: 100%;

        background-color: var(--c-bg-secondary);
        padding: 1.125rem;

        border: 0.5px solid var(--c-separator);
        border-radius: 1.75rem;
        box-shadow: 0 0 3rem var(--c-shadow);

        display: flex;
        flex-flow: column;
        justify-content: space-between;
        gap: 0.25rem;

        will-change: transform;
        transition: scale 150ms ease;

        &:hover {
          scale: 1.02;

          .title {
            text-decoration: underline;
          }
        }

        &[data-tag]::after {
          content: attr(data-tag);

          position: absolute;
          inset-block-start: 1.125rem;
          inset-inline-end: 1.125rem;

          display: block;
          font-size: 0.75rem;
          font-weight: 600;
          text-transform: uppercase;
          color: var(--c-secondary);

          background-color: var(--c-bar);
          padding: 0.125rem 0.5rem;
          border-radius: 0.5rem;
        }

        > .icon {
          width: 2.5rem;
          height: 2.5rem;

          margin-bottom: 0.5rem;
        }

        > .content {
          display: flex;
          flex-flow: column;
          gap: 0.25rem;

          .title {
            font-size: 1.125rem;
            max-inline-size: 20rem;

            .no-break {
              overflow-wrap: normal;
              white-space: nowrap;
            }
          }

          .description {
            font-size: 0.9375rem;
            font-weight: 400;
            line-height: 1.4;
            color: var(--c-secondary);

            &.note {
              font-style: italic;
              font-weight: 500;
            }
          }
        }
      }
    }
  }
}