@use "../../../styles/int.scss";

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "title"
    "accoutrements"
    "cards";
  gap: var(--Grid-gutter);
  margin-bottom: calc(#{int.$spacing-8} - var(--Grid-gutter));
  color: int.$warmgray-100;
    
  @include int.breakpoint-at-least("md") {
    grid-template-columns: 4fr 8fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "title title"
      "accoutrements cards";
    margin-top: calc(72px - var(--Grid-gutter));
    margin-bottom: calc(44px - var(--Grid-gutter));
  }

  @include int.breakpoint-at-least("lg") {
    grid-template-areas: "title cards"
      "accoutrements cards";
  }
}

.pageTitle {
  grid-area: title;
}

.accoutrements {
  grid-area: accoutrements;
}

.cards {
  grid-area: cards;
}