.layout--twocol--50-50 .grid-row .col { flex-basis: 50% }

.layout--twocol--40-60 .grid-row .layout__region--first { flex-basis: 40% }
.layout--twocol--40-60 .grid-row .layout__region--second { flex-basis: 60% }
.layout--twocol--60-40 .grid-row .layout__region--first { flex-basis: 60% }
.layout--twocol--60-40 .grid-row .layout__region--second { flex-basis: 40% }
.layout--twocol--30-70 .grid-row .layout__region--first { flex-basis: 30% }
.layout--twocol--30-70 .grid-row .layout__region--second { flex-basis: 70% }
.layout--twocol--70-30 .grid-row .layout__region--first { flex-basis: 70% }
.layout--twocol--70-30 .grid-row .layout__region--second { flex-basis: 30% }

/* Override background settings otherwise position: sticky won't work */
.layout--twocol.is-sticky .layout-bg-section {
  overflow: initial !important;
}

.layout--twocol.is-sticky .layout-bg-content-container {
  transform: translateX(0) !important;
}

.layout--twocol.is-sticky .layout-bg-row,
.layout--twocol.is-sticky .layout-bg-row > * {
  width: 100% !important;
}

.layout--twocol.is-sticky .grid-row {
  align-items: initial !important;
}

.layout--twocol.is-sticky .blazy .media {
  position: initial;
}

/* Sticky column settings */
.layout--twocol.sticky--left .layout__region--first,
.layout--twocol.sticky--right .layout__region--second {
  position: relative;
}

.layout--twocol.sticky--left .layout__region--first .layout-region-inner,
.layout--twocol.sticky--right .layout__region--second .layout-region-inner {
  position: sticky;
  top: calc(10vh + 6.5rem);
  height: calc(80vh - 6.5rem);
  transform: translateZ(0);
}

@media screen and (max-width: 960px) {
  .layout--twocol .grid-row .col {
    flex-basis: 50%;
  }
}

@media screen and (max-width: 640px) {
  .layout--twocol .grid-row .col {
    flex-basis: 100%;
  }
}

.layout--twocol .grid-row {
  display: block;
}

@media screen and (min-width: 961px) {
  .layout--twocol .grid-row {
    display: flex;
  }
}