/*
 * @ske/core default theme
 */
.layout-header-sidebar20-content80-footer,
.layout-header-content80-sidebar20-footer,
.layout-header-sidebar50-content50-footer {
  /* We need to setVar the widths used on floated items back to auto, and remove the bottom margin as when we have grid we have gaps. */
}
@media screen and (min-width: 500px) {
  .layout-header-sidebar20-content80-footer,
.layout-header-content80-sidebar20-footer,
.layout-header-sidebar50-content50-footer {
    /* no grid support? */
  }
  .layout-header-sidebar20-content80-footer .sk-layout-wrapper,
.layout-header-content80-sidebar20-footer .sk-layout-wrapper,
.layout-header-sidebar50-content50-footer .sk-layout-wrapper {
    display: grid;
  }
  .layout-header-sidebar20-content80-footer .sidebar,
.layout-header-content80-sidebar20-footer .sidebar,
.layout-header-sidebar50-content50-footer .sidebar {
    float: left;
    width: 20%;
  }
  .layout-header-sidebar20-content80-footer .content,
.layout-header-content80-sidebar20-footer .content,
.layout-header-sidebar50-content50-footer .content {
    float: right;
    width: 80%;
  }
  .layout-header-sidebar20-content80-footer .sk-layout-wrapper,
.layout-header-content80-sidebar20-footer .sk-layout-wrapper,
.layout-header-sidebar50-content50-footer .sk-layout-wrapper {
    margin: 0 auto;
    grid-template-columns: 1fr 3fr;
  }
  .layout-header-sidebar20-content80-footer .header, .layout-header-sidebar20-content80-footer .footer,
.layout-header-content80-sidebar20-footer .header,
.layout-header-content80-sidebar20-footer .footer,
.layout-header-sidebar50-content50-footer .header,
.layout-header-sidebar50-content50-footer .footer {
    grid-column: 1/-1;
    /* needed for the floated layout */
    clear: both;
  }
}
.layout-header-sidebar20-content80-footer .sk-layout-wrapper > *,
.layout-header-content80-sidebar20-footer .sk-layout-wrapper > *,
.layout-header-sidebar50-content50-footer .sk-layout-wrapper > * {
  /* needed for the floated layout*/
  margin-bottom: 10px;
}
@supports (display: grid) {
  .layout-header-sidebar20-content80-footer .sk-layout-wrapper > *,
.layout-header-content80-sidebar20-footer .sk-layout-wrapper > *,
.layout-header-sidebar50-content50-footer .sk-layout-wrapper > * {
    width: auto;
    margin: 0;
  }
}

@media screen and (min-width: 500px) {
  .layout-header-content80-sidebar20-footer {
    /* no grid support? */
  }
  .layout-header-content80-sidebar20-footer .sk-layout-wrapper {
    grid-template-columns: 3fr 1fr;
  }
  .layout-header-content80-sidebar20-footer .sidebar {
    float: right;
  }
  .layout-header-content80-sidebar20-footer .content {
    float: left;
  }
}

.layout-header-content50-sidebar50-footer .sk-layout-wrapper {
  grid-template-columns: 1fr 1fr;
}
.layout-header-content50-sidebar50-footer .sidebar {
  float: left;
  min-width: 49.1489%;
}
.layout-header-content50-sidebar50-footer .content {
  float: right;
  width: 49.7872%;
}

.layout-grid-fill {
  /* no grid support? */
  /* We need to setVar the margin used on flex items to 0 as we have gaps in grid.  */
}
.layout-grid-fill .sk-layout-wrapper {
  margin: 0 auto;
  display: grid;
  grid-gap: 10px;
  justify-items: center;
}
.layout-grid-fill .sk-layout-wrapper {
  display: flex;
  flex-wrap: wrap;
}
.layout-grid-fill .sk-layout-wrapper {
  display: grid;
  margin: 0 auto;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  grid-auto-rows: minmax(210px, auto);
}
.layout-grid-fill .content {
  /* needed for the flex layout*/
  margin-left: 5px;
  margin-right: 5px;
  flex: 1 1 230px;
  flex: 1 1 230px;
}
.layout-grid-fill .sk-layout-wrapper > * {
  margin-bottom: 10px;
}
@supports (display: grid) {
  .layout-grid-fill .sk-layout-wrapper > * {
    margin: 0;
  }
}