@layer component.layout {
  .two-col {
    gap: 1rem;
  }

  @media (min-width: 1025px) {
    .two-col--columns-ratio_4_8 {
      grid-template-columns: 1fr 2fr;
    }

    .two-col--columns-ratio_5_7 {
      grid-template-columns: 5fr 7fr;
    }

    .two-col--columns-ratio_6_6 {
      grid-template-columns: 1fr 1fr;
    }

    .two-col--columns-ratio_7_5 {
      grid-template-columns: 7fr 5fr;
    }

    .two-col--columns-ratio_8_4 {
      grid-template-columns: 2fr 1fr;
    }
  }
}