main > section:nth-child(2n + 1)  {
  padding: 0;
  max-width: 100%;
}

h1 {
  background-color: var(--sand-100);
  padding: var(--default-padding) max(var(--default-padding), calc(calc(100vw - var(--max-width)) / 2));
}

main ul {
  display: flex;
  flex-wrap: wrap;
}

main ul li {
  padding: var(--default-padding);
}

main ul h2 {
  margin: var(--half-padding) 0;
}
  
@media (max-width: 600px) {
  main ul li:nth-child(2n + 1) {
    background-color: var(--sand-50);
  }
}

@media (min-width: 600px) {
  main ul {
    --padding: max(var(--default-padding), calc(calc(100vw - var(--max-width)) / 2));
    padding: 0 calc(var(--padding) + var(--double-padding));
    margin-bottom: var(--double-padding);
    gap: var(--double-padding);
    justify-content: center;
  }

  main ul li {
    flex: calc(50% - var(--default-padding)) 0 0;
  }
}