/*
 * @file
 * Provides the layout styles for canvas general.
 */
.layout--canvas-general .regions-wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  -ms-grid-columns: 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr;
  grid-column-gap: 20px;
}

.layout--canvas-general.has-sidebar-left .regions-wrapper .layout__region--sidebar-left {
  grid-column: span 4;
  max-width: 100%;
}

.layout--canvas-general.has-sidebar-right .regions-wrapper .layout__region--sidebar-right {
  grid-column: span 3;
  max-width: 100%;
}

.layout--canvas-general .regions-wrapper .layout__region--main {
  grid-column: span 12;
  max-width: 100%;
}

.layout--canvas-general.has-sidebar-left .regions-wrapper .layout__region--main {
  grid-column: span 8;
  max-width: 100%;
}

.layout--canvas-general.has-sidebar-right .regions-wrapper .layout__region--main {
  grid-column: span 9;
  max-width: 100%;
}

.layout--canvas-general.has-sidebar-left.has-sidebar-right .regions-wrapper .layout__region--main {
  grid-column: span 5;
  max-width: 100%;
}

/* One block per row for mobile. */
@media screen and (max-width: 768px) {
  .layout--canvas-general .regions-wrapper {
    grid-template-columns: repeat(1, minmax(320px, 1fr));
    -ms-grid-columns: 1fr 15px;
    grid-gap: 15px;
  }
  .layout--canvas-general .regions-wrapper .layout__region--main,
  .layout--canvas-general.has-sidebar-left .regions-wrapper .layout__region--main,
  .layout--canvas-general.has-sidebar-right .regions-wrapper .layout__region--main,
  .layout--canvas-general.has-sidebar-left.has-sidebar-right .regions-wrapper .layout__region--main,
  .layout--canvas-general.has-sidebar-left .regions-wrapper .layout__region--sidebar-left,
  .layout--canvas-general.has-sidebar-right .regions-wrapper .layout__region--sidebar-right {
    grid-row: auto;
    grid-column: span 1;
  }
}

@media screen and (max-width: 1023px) {
  .node--type-page .layout--canvas-general .regions-wrapper {
    grid-template-columns: repeat(1, minmax(320px, 1fr));
    -ms-grid-columns: 1fr 15px;
    grid-gap: 15px;
  }
  .node--type-page .layout--canvas-general .regions-wrapper .layout__region--main,
  .node--type-page .layout--canvas-general.has-sidebar-left .regions-wrapper .layout__region--main,
  .node--type-page .layout--canvas-general.has-sidebar-right .regions-wrapper .layout__region--main,
  .node--type-page .layout--canvas-general.has-sidebar-left.has-sidebar-right .regions-wrapper .layout__region--main,
  .node--type-page .layout--canvas-general.has-sidebar-left .regions-wrapper .layout__region--sidebar-left,
  .node--type-page .layout--canvas-general.has-sidebar-right .regions-wrapper .layout__region--sidebar-right {
    grid-row: auto;
    grid-column: span 1;
  }
}

@media screen and (max-width: 374px) {
  .layout--canvas-general .regions-wrapper {
    grid-template-columns: repeat(1, minmax(220px, 1fr));
    -ms-grid-columns: 1fr 15px;
  }
}

/* Keep sidebars for tablet if option enabled. */
@media (min-width: 761px) and (max-width: 768px) {
  .static-tablet-sidebar.layout--canvas-general .regions-wrapper {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    -ms-grid-columns: 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr;
    grid-column-gap: 20px;
  }

  .static-tablet-sidebar.layout--canvas-general.has-sidebar-left .regions-wrapper .layout__region--sidebar-left {
    grid-column: span 4;
  }

  .static-tablet-sidebar.layout--canvas-general.has-sidebar-right .regions-wrapper .layout__region--sidebar-right {
    grid-column: span 3;
  }

  .static-tablet-sidebar.layout--canvas-general .regions-wrapper .layout__region--main {
    grid-column: span 12;
  }

  .static-tablet-sidebar.layout--canvas-general.has-sidebar-left .regions-wrapper .layout__region--main {
    grid-column: span 8;
  }

  .static-tablet-sidebar.layout--canvas-general.has-sidebar-right .regions-wrapper .layout__region--main {
    grid-column: span 9;
  }

  .static-tablet-sidebar.layout--canvas-general.has-sidebar-left.has-sidebar-right .regions-wrapper .layout__region--main {
    grid-column: span 5;
  }
}