.l-double {
  @include template(left, right);

  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-template-columns: minmax(0, 1fr);
  grid-row-gap: space(4);
  grid-template-areas:
    "left"
    "right";

  @include mq(l) {
    grid-template-rows: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-column-gap: column(1);
    grid-template-areas: "left right";
  }
}

.l-double--wide {
  @include mq(l) {
    grid-template-columns: 5fr minmax(560px, 6fr);
  }
}

.l-double--reversed {
  @include mq(l) {
    grid-template-areas: "right left";
  }

  &.l-double--wide {
    @include mq(l) {
      grid-template-columns: minmax(560px, 6fr) 5fr;
    }
  }
}