@layer components {
  .screen-icon-layout {
    /* Expected layout:
        <icon/>
        <header>
          <title/>
          <description/>
        </header>
        <flex-1 spacing/>
        <footer>
          <button/>
        </footer>
     */
    @apply pt-14;

    @apply grid gap-6;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto;
  }

  .screen-icon-layout--compact {
    /* Expected layout:
        <icon/>
        <header>
          <title/>
          <description/>
        </header>
        <footer>
          <button/>
          <--or--/>
          <buttons.../>
        </footer>
     */
    grid-template-rows: auto auto minmax(min-content, 1fr);
  }

  @media (min-width: theme("screens.tablet")) {
    .screen-icon-layout {
      /* Expected layout:
        <icon/>
        <section>
          <title/>
          <description/>
        </section>
        <64px spacing/>
        <footer>
          <button/>
        </footer>
     */
      @apply pt-0 pb-0;
      grid-template-rows: auto auto 1rem 1fr; /* 64 - 24(gap) * 2 = 16 */
    }

    .screen-icon-layout--compact {
      /* Same as mobile */
      grid-template-rows: auto auto minmax(min-content, 1fr);
    }
  }
}
