/*
 * @file
 * Provides the layout styles for two-column layout section.
 */
/* VARIABLES */
/* TYPOGRAPHY */
/* Google Fonts */
.layout--twocol-section {
  display: grid;
  gap: 24px;
}

@media screen and (width >= 48em) {
  .layout--twocol-section {
    display: flex;
    flex-wrap: nowrap;
    gap: 48px;
  }
}
@media screen and (width >= 48em) {
  .layout--twocol-section.layout--twocol-section--50-50 > .layout__region--first,
  .layout--twocol-section.layout--twocol-section--50-50 > .layout__region--second {
    flex: 0 1 calc(50% - 24px);
    max-width: calc(50% - 24px);
  }
}
@media screen and (width >= 48em) {
  .layout--twocol-section.layout--twocol-section--25-75 > .layout__region--first, .layout--twocol-section.layout--twocol-section--75-25 > .layout__region--second {
    flex: 0 1 calc(25% - 24px);
    max-width: calc(25% - 24px);
  }
}
@media screen and (width >= 48em) {
  .layout--twocol-section.layout--twocol-section--25-75 > .layout__region--second, .layout--twocol-section.layout--twocol-section--75-25 > .layout__region--first {
    flex: 0 1 calc(75% - 24px);
    max-width: calc(75% - 24px);
  }
}
.layout--twocol-section.layout--twocol-section--33-67, .layout--twocol-section.layout--twocol-section--67-33 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media screen and (width >= 48em) {
  .layout--twocol-section.layout--twocol-section--33-67, .layout--twocol-section.layout--twocol-section--67-33 {
    display: grid;
    gap: 48px;
  }
}
.layout--twocol-section.layout--twocol-section--33-67 {
  grid-template-columns: 1fr;
}

@media screen and (width >= 48em) {
  .layout--twocol-section.layout--twocol-section--33-67 {
    grid-template-columns: 1fr 2fr;
  }
}
@media (min-width: 1200px) {
  .layout--twocol-section.layout--twocol-section--33-67 {
    grid-template-columns: 344px 1fr;
  }
}
.layout--twocol-section.layout--twocol-section--67-33 {
  grid-template-columns: 1fr;
}

@media screen and (width >= 48em) {
  .layout--twocol-section.layout--twocol-section--67-33 {
    grid-template-columns: 2fr 1fr;
  }
}
@media (min-width: 1200px) {
  .layout--twocol-section.layout--twocol-section--67-33 {
    grid-template-columns: 1fr 344px;
  }
}
/*# sourceMappingURL=twocol_section.css.map */