@custom-media --breakpoint (min-width: 60em);

.panel:first-child {
  margin-bottom: calc(var(--grid-gap) * 2);
}

.twoUp[data-collapse="true"] .panel:first-child {
  margin-bottom: 2rem;
}

@media (--breakpoint) {
  .twoUp {
    display: flex;
    margin: 0 var(--grid-offset);
    &[data-centered="true"] {
      align-items: center;
    }
    &[data-reverse="true"] {
      flex-direction: row-reverse;
    }
  }

  .panel {
    flex: 1;
    align-items: stretch;
    margin: 0 var(--grid-gap) !important;
  }
}