/*!══════════════════════════════════════════════════╗
  ║                            Main                           ║
  ╚══════════════════════════════════════════════════╝*/

main {
  position: relative;

  > section {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-xl);
  }

  // add .container or .container-fluid to align content
  &.has-aside {
    grid-template-columns: minmax(150px, 250px) 1fr;
    grid-template-areas: "aside article";
    grid-gap: 20px 20px;

    @include grid;
    @include media-breakpoint-down(md) {
      grid-template-columns: 1fr 1fr;
      grid-template-areas: "article article" "aside aside";
    }

    aside {
      grid-area: aside;
    }

    content,
    > section,
    article {
      margin-top: 0;
      margin-bottom: 0;

      grid-area: article;
    }
  }
}

// ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄
// Section

section {
  position: relative;

  overflow-x: hidden;
}