/*
 * @file
 * Provides the layout styles for layout_threecol.
 */

:root {
  --rb-layout-layout-width: 1200px;
  --rb-layout-layout-gap: 24px;
}

.layout {
  max-width: var(--rb-layout-layout-width);
  width: 100%;
  margin: 0 auto;
}

.layout-col-3 {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.layout-col-3 > div {
  flex: 0 1 100%;
  margin-bottom: 0
}

.highlighted-content-group .layout-col-3,
.page-content .layout-col-3 {
  padding-inline: var(--spacing-24);
}

@media screen and (width >= 740px) {
  .layout-col-3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: var(--rb-layout-layout-gap);
  }
}

@media screen and (width >= 1106px) {
  .layout-col-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: var(--rb-layout-layout-gap);
  }
  .highlighted-content-group .layout-col-3,
  .page-content .layout-col-3 {
    padding-inline: 0;
  }
}