@media (orientation: landscape) {
  body {
    gap: var(--gap-half) var(--gap-standard);
    padding: var(--gap-half) var(--gap-standard);
  }
  .card {
    padding: var(--gap-half) var(--gap-standard);
  }
  .flex {
    gap: var(--gap-half) var(--gap-standard);
  }
  .project {
    gap: var(--gap-half) var(--gap-standard);
  }
}

/* @media (orientation: landscape) and (height < 32em) {}

@media (orientation: landscape) and (width < 50em) {} */