.container {
  display: grid;
  gap: var(--Spacing-x3) var(--Spacing-x9);
}

.content {
  margin: var(--Spacing-x3) var(--Spacing-x2) 0;
}

.summary {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
}

@media screen and (min-width: 1367px) {
  .container {
    grid-template-columns: 1fr 340px;
    grid-template-rows: auto 1fr;
    margin: var(--Spacing-x5) auto 0;
    /* simulates padding on viewport smaller than --max-width-navigation */
    width: min(
      calc(100dvw - (var(--Spacing-x2) * 2)),
      var(--max-width-navigation)
    );
  }

  .summary {
    position: static;
    display: grid;
    grid-column: 2/3;
    grid-row: 1/-1;
  }
}