main > section:first-child {
  padding: 0;
  max-width: 100%;
}

main > section.intro {
  max-width: 100%;
  padding: max(var(--default-padding), calc(calc(100vw - var(--max-width)) / 2));
  display: flex;
  flex-direction: column;
  gap: var(--default-padding);
}

.intro .portrait {
  max-width: 400px;
}

.intro .portrait img {
  width: 100%;
}

.intro > ul {
  flex-direction: column;
}

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;
  gap: var(--default-padding);
}

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

main ul h2 {
  margin-bottom: var(--half-padding);
}

main > section:last-child figure figcaption {
  margin-top: 1em;
}

@media (max-width: 600px) {
  main ul li:nth-child(2n) {
    background-color: var(--sand-50);
  }
}

@media (min-width: 600px) {
  main > section.intro {
    --padding: max(var(--default-padding), calc(calc(100vw - var(--max-width)) / 2));
    padding: var(--double-padding) calc(var(--padding) + var(--double-padding));
    gap: var(--double-padding);
  }

  .intro > ul {
    gap: var(--double-padding);
  }

  .intro > ul li {
    padding: 0;
  }

  main q {
    margin: var(--double-paddingq) 0px;
  }
  main > section:last-child figure {
    display: flex;
    gap: var(--double-padding);
    margin: 0px var(--double-padding);
  }

  main > section:last-child figure img {
    width: 40%;
  }
}

/* the portrait only sits beside the text once the text column stays readable */
@media (min-width: 900px) {
  main > section.intro {
    flex-direction: row;
    align-items: center;
  }

  .intro .portrait {
    flex: 0 0 400px;
  }

  .intro > ul {
    flex: 1 1 0;
  }
}