.grid {
  display: grid;
  gap: calc(var(--spacer) * 1.5);
  position: relative;
}

@media (min-width: 55rem) {
  .grid {
    /* lazy golden ratio */
    grid-template-columns: 1.618fr 1fr;
  }

  .sticky {
    position: sticky;
    top: var(--spacer);
  }
}

.tabs {
  margin-top: var(--spacer);
  background-color: var(--background-body);
}

.tabs ul[class*='tabList'] {
  background-color: var(--background-content);
  border: 1px solid var(--border-color);
  border-bottom: 0;
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: auto;
}

.tabs div[class*='tabContent'] {
  border: 1px solid var(--border-color);
  padding-bottom: 0;
}

.tabs div[class*='tab-panel--selected'] {
  margin-bottom: var(--spacer);
}
