@use "../mixins/media";

.page--home {
  display: grid;

  @include media.breakpoint(small) {
    grid:
      "main ." auto
      "main social" auto
      ". social" auto
      "badges updates" auto
      ". updates" auto
      / 1fr auto;

    .home__main {
      grid-area: main;
    }

    .home__social {
      grid-area: social;
    }

    .home__updates {
      grid-area: updates;
    }

    .home__badges {
      grid-area: badges;
    }
  }
}