.fizz-layout-narrow-two-up {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(min-content, 100%) minmax(0, 1fr);
  grid-template-rows: auto;
  grid-gap: 1.5rem;
  grid-template-areas:
    ". top ."
    ". left ."
    ". right .";
  align-items: start;
  margin-top: 32px;
}

.fizz-layout-narrow-two-up > [data-grid-area="left"],
.fizz-layout-narrow-two-up > [data-grid-area="right"] {
  border: $border-width-thin solid $color-border-default;
  border-radius: $border-radius-small;
  background-color: $color-background-surface;
}

.fizz-layout-narrow-two-up > [data-grid-area="top"] {
  grid-area: top;
}

.fizz-layout-narrow-two-up > [data-grid-area="left"] {
  grid-area: left;
}

.fizz-layout-narrow-two-up > [data-grid-area="right"] {
  grid-area: right;
}

@media (min-width: $breakpoint-m) {
  .fizz-layout-narrow-two-up {
    grid-template-columns: minmax(0, 1fr) repeat(2, minmax(min-content, 382px)) minmax(0, 1fr);
    grid-template-areas:
      ". top top ."
      ". left right .";
  }
}