/*
 * @file
 * Provides the layout styles for two-column layout section.
 */

.layout--twocol-section {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 50px 60px;
}

@media screen and (min-width: 768px) {
  .layout--twocol-section {
    flex-wrap: nowrap;
  }
}

.layout--twocol-section > .layout__region {
  flex: 0 1 100%;
  width: 100%;
}

@media screen and (min-width: 768px) {
  .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 50%;
    width: 50%;
  }

  .layout--twocol-section.layout--twocol-section--33-67 > .layout__region--first,
  .layout--twocol-section.layout--twocol-section--67-33 > .layout__region--second {
    flex: 0 1 33%;
    width: 33%;
  }

  .layout--twocol-section.layout--twocol-section--33-67 > .layout__region--second,
  .layout--twocol-section.layout--twocol-section--67-33 > .layout__region--first {
    flex: 0 1 67%;
    width: 67%;
  }

  .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 25%;
    width: 25%;
  }

  .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 75%;
    width: 75%;
  }
}

@media screen and (max-width: 1199px) {
  .layout--twocol-section.layout--twocol-section--25-75 > .layout__region--first {
    flex: 0 1 26%;
    width: 26%;
  }

  .layout--twocol-section.layout--twocol-section--25-75 > .layout__region--second {
    flex: 0 1 74%;
    width: 74%;
  }
}

@media screen and (max-width: 992px) {
  .layout--twocol-section.layout--twocol-section--25-75 > .layout__region--first {
    width: 220px;
    flex: 0 1 220px;
  }

  .layout--twocol-section.layout--twocol-section--25-75 > .layout__region--second {
    flex: 0 1 calc(100% - 287px);
    max-width: calc(100% - 287px);
  }
}

@media screen and (max-width: 768px) {
  .layout--twocol-section {
    gap: 0 60px;
  }

  .layout--twocol-section.layout--twocol-section--25-75 > .layout__region--first,
  .layout--twocol-section.layout--twocol-section--25-75 > .layout__region--second {
    width: 100%;
    flex: 0 1 100%;
    max-width: initial;
  }
}