/*
 * @file
 * Provides the layout styles for two-column layout section.
 */
.layout--two-column {
  display: grid;
  gap: 1rem;
}

@media screen and (min-width: 640px) {
  .layout--two-column {
    grid-template-columns: repeat(2, calc(50% - 0.75rem));
  }
  .layout--two-column--75-25 {
    grid-template-columns: calc(75% - 0.75rem) calc(25% - 0.75rem);
  }
  .layout--two-column--25-75 {
    grid-template-columns: calc(25% - 0.75rem) calc(75% - 0.75rem);
  }
  .layout--two-column--33-67 {
    grid-template-columns: calc(33% - 0.75rem) calc(67% - 0.75rem);
  }
  .layout--two-column--67-33 {
    grid-template-columns: calc(67% - 0.75rem) calc(33% - 0.75rem);
  }
}
@media screen and (min-width: 1100px) {
  .layout--two-column {
    gap: 2rem;
    grid-template-columns: repeat(2, calc(50% - 1rem));
  }
  .layout--two-column--75-25 {
    grid-template-columns: calc(75% - 1rem) calc(25% - 1rem);
  }
  .layout--two-column--25-75 {
    grid-template-columns: calc(25% - 1rem) calc(75% - 1rem);
  }
  .layout--two-column--33-67 {
    grid-template-columns: calc(33% - 1rem) calc(67% - 1rem);
  }
  .layout--two-column--67-33 {
    grid-template-columns: calc(67% - 1rem) calc(33% - 1rem);
  }
}