main > section {
  padding-block: calc(var(--global-space) * 2);
}
main > section:last-of-type {
  padding-block-end: calc(var(--global-space) * 4);
}

section#gallery {
  text-align: center;
}
section#gallery h2 {
  position: relative;

  max-width: max-content;
  margin-inline: auto;
  margin-block-end: calc(var(--global-space) * 2);

  color: var(--clr-primary-400);
}
section#gallery h2::after {
  content: "";
  display: block;

  width: 50%;
  height: 2px;
  background-color: var(--clr-primary-400);

  position: absolute;
  top: 120%;
  inset-inline: 0;

  margin-inline: auto;
}
section#gallery ul {
  list-style: none;

  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--global-space);
}
section#gallery li {
  position: relative;
  flex: 0 1 250px;

  box-shadow: 1px 1px 4px hsl(0, 0%, 0%, 0.5);
  border-radius: var(--border-radius);

  overflow: hidden;
}
section#gallery li::after {
  content: "";
  display: block;

  position: absolute;
  bottom: 0;
  inset-inline: 0;

  font-weight: bold;
  text-transform: uppercase;
  font-size: var(--fs-small);

  color: var(--text-color-alternative);
  background-color: hsl(var(--hsl-primary-400), 0.9);
  padding-block: calc(var(--global-space) / 2);
}
section#gallery li:nth-of-type(even)::after {
  content: "after";
}
section#gallery li:nth-of-type(odd)::after {
  content: "before";
}
section#gallery .photo {
  display: block;
  aspect-ratio: 1 / 1.25;
}