/**
 * Grid
 * ----------------------------------------
 */
.grid {
  --grid-sidebar-width: 275px;

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

.grid-sidebar-left {
  grid-area: sidebar1;
}

.grid-content {
  grid-area: content;
}

.grid-sidebar-right {
  grid-area: sidebar2;
}

/**
 * XX. grid-3-6-3
 * ----------------------------------------
 */
/**
 * Base grid.
 */

/**
 * Full-width content.
 */
.grid-12 {
  grid-template-areas: "content";
}

/**
 * Left sidebar and content.
 */
.grid-3-9 {
  grid-template-areas:
    "content"
    "sidebar1";
}

@media (min-width: 992px) {.grid-3-9 {
    grid-template-columns:
      var(--grid-sidebar-width)
      minmax(0, 1fr);

    grid-template-areas: "sidebar1 content";
  }
}

/**
 * Content and right sidebar.
 */
.grid-9-3 {
  grid-template-areas:
    "content"
    "sidebar2";
}

@media (min-width: 992px) {.grid-9-3 {
    grid-template-columns:
      minmax(0, 1fr)
      var(--grid-sidebar-width);

    grid-template-areas: "content sidebar2";
  }
}

/**
 * Both sidebars and content.
 */
.grid-3-6-3 {
  grid-template-areas:
    "content"
    "sidebar1"
    "sidebar2";
}

@media (min-width: 576px) {.grid-3-6-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "content content"
      "sidebar1 sidebar2";
  }
}

@media (min-width: 992px) {.grid-3-6-3 {
    grid-template-columns:
      var(--grid-sidebar-width)
      minmax(0, 1fr);

    grid-template-areas:
      "sidebar1 content"
      "sidebar2 content";
  }
}

@media (min-width: 1200px) {.grid-3-6-3 {
    grid-template-columns:
      var(--grid-sidebar-width)
      minmax(0, 1fr)
      var(--grid-sidebar-width);

    grid-template-areas: "sidebar1 content sidebar2";
  }
}

@media (min-width: 992px) and (max-width: 1200px) {.grid-3-6-3 {
    grid-template-rows: min-content minmax(0, 1fr);
  }
}

/**
 * Column placement.
 */
.grid-sidebar-left {
  grid-area: sidebar1;
}

.grid-content {
  grid-area: content;
}

.grid-sidebar-right {
  grid-area: sidebar2;
}

/**
 * Content and widget spacing within columns.
 */
.grid > .grid-column {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 16px;
}