@import "abstracts/fonts";
@import "abstracts/variables";
@import "abstracts/mixins";

@import "base/typography";

.site-container {
  display: grid;
  grid-template-columns: 2.5% 1fr 2.5%;
  grid-template-rows: auto 1fr 2.5%;
  grid-template-areas:
    "header header header"
    "page-container page-container page-container"
    "footer footer footer";
  min-height: calc(100vh - 4em);
  border-top: 0;
  @include mq('desktop') {
    margin-bottom: 2em;
    grid-template-areas:
      "header header header"
      ". page-container ."
      "footer footer footer";
    border: 2px solid black;
    margin-left: 2em;
    margin-right: 2em;
  }

  &--homepage {
    align-items: center;
    grid-template-rows: auto 2.5%;
    grid-template-areas:
      "page-container page-container page-container"
      "footer footer footer";
    margin-top: 2em;
    margin-bottom: 2em;
    @include mq('desktop') {
      border: 2px solid black;
      margin-left: 2em;
      margin-right: 2em;
      grid-template-areas:
        ". page-container ."
        "footer footer footer";
    }
  }

  &--list,
  &--section {
    align-items: center;
  }
}

@import "layout/header";
@import "layout/footer";
@import "layout/main";

@import "components/gallery";
@import "components/icons";
@import "components/item-tile";
@import "components/table";

@import "pages/home";
@import "pages/collection";
@import "pages/single";
@import "pages/organisations-list";
@import "pages/single-organisation";

@media (prefers-color-scheme: dark) {
  /*@import "themes/dark";*/
}