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

.layout.layout--twocol {
  display: flex;
  flex-wrap: wrap;
}

@media (max-width: 1023px) {
  .layout.layout--twocol > .layout__region {
    flex: none; 
    width: 100%;
  }
}

@media (min-width: 1024px) and (max-width: 1214px) { 
  .layout--twocol.layout--twocol-section--50-50 > .layout__region--first,
  .layout--twocol.layout--twocol-section--50-50 > .layout__region--second {
    flex: none; 
    width: 50%;
  }

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

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

  .layout--twocol.layout--twocol-section--25-75 > .layout__region--first,
  .layout--twocol.layout--twocol-section--75-25 > .layout__region--second {
    flex: none; 
    width: 50%;
  }

  .layout--twocol.layout--twocol-section--25-75 > .layout__region--second,
  .layout--twocol.layout--twocol-section--75-25 > .layout__region--first {
    flex: none; 
    width: 50%;
  }

  .layout--twocol.layout--twocol-section--38-62 > .layout__region--first,
  .layout--twocol.layout--twocol-section--62-38 > .layout__region--second {
    flex: none; 
    width: 50%;
  }

  .layout--twocol.layout--twocol-section--38-62 > .layout__region--second,
  .layout--twocol.layout--twocol-section--62-38 > .layout__region--first {
    flex: none; 
    width: 50%;
  }
}

@media (min-width: 1215px) { 
  .layout--twocol.layout--twocol-section--50-50 > .layout__region--first,
  .layout--twocol.layout--twocol-section--50-50 > .layout__region--second {
    flex: none; 
    width: 50%;
  }

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

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

  .layout--twocol.layout--twocol-section--25-75 > .layout__region--first,
  .layout--twocol.layout--twocol-section--75-25 > .layout__region--second {
    flex: none; 
    width: 25%;
  }

  .layout--twocol.layout--twocol-section--25-75 > .layout__region--second,
  .layout--twocol.layout--twocol-section--75-25 > .layout__region--first {
    flex: none; 
    width: 75%;
  }

  .layout--twocol.layout--twocol-section--38-62 > .layout__region--first,
  .layout--twocol.layout--twocol-section--62-38 > .layout__region--second {
    flex: none; 
    width: 38%;
  }

  .layout--twocol.layout--twocol-section--38-62 > .layout__region--second,
  .layout--twocol.layout--twocol-section--62-38 > .layout__region--first {
    flex: none; 
    width: 62%;
  }
}