@layer component.base {
  .two-col {
    display: grid;
    @media (min-width: 1025px) {
      grid-template:
        "left right" auto /
        1fr 1fr;
    }
  }

  .two-col__left {
    @media (min-width: 1025px) {
      grid-area: left;
    }
  }

  .two-col__right {
    @media (min-width: 1025px) {
      grid-area: right;
    }
  }

  .two-col__left,
  .two-col__right {
    &::before {
      content: "";
      display: block;
      height: 0;
      margin-bottom: 1em;
    }
    &::after {
      content: "";
      display: block;
      height: 0;
      margin-top: 1em;
    }
  }
}