:root {
  /* colors */
  --white: 255 255 255;
  --black: 0 0 0;

  /* variables */
  --header-height: 6rem;
}

html {
  box-sizing: border-box;
  font-family: monospace;
  font-size: 100%;
  color: rgb(var(--black));
  background-color: rgb(var(--white));
  scroll-behavior: smooth;
  /* scroll-snap-type: y mandatory; */
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

a {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.no-text-decoration {
  text-decoration: none;
}

.header {
  position: sticky;
  inset-block-start: 0;
  inset-inline: 0;
  height: var(--header-height);
  padding: 0.5rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  background-image: linear-gradient(
    to bottom,
    rgb(var(--white)),
    90%,
    rgb(var(--white) / 0)
  );
}

.site-nav__list {
  min-height: 100%;
  margin: 0;
  display: flex;
  justify-content: space-evenly;
  gap: 1rem;
}

.site-nav__link {
  padding-block: 0.8rem;
}

.site-nav__item:nth-child(2n + 1) {
  align-self: center;
}

.main {
  display: grid;
  /* grid-template-columns: repeat(2, minmax(0, 1fr)); */
  grid-template-columns: repeat(2, 1fr);
}

.main__part--end::before {
  display: block;
  /* scroll-snap-align: start; */
  content: "";
}

.main__part--end::before,
.main__section {
  min-height: calc(100vh - var(--header-height));
  scroll-margin-block-start: max(var(--header-height), 25vh);
  /* scroll-snap-align: start; */
}

.section {
  padding-inline-start: 1rem;
  background-image: linear-gradient(
    to right,
    rgb(var(--white) / 0),
    rgb(var(--white)) 10%
  );
}

.section__heading {
  margin-inline-start: -10%;
}

.main-images {
  position: sticky;
  inset-block-start: var(--header-height);
  z-index: -1;
  /* max-width: 100vw;
  overflow-x: auto; */
  display: flex;
  gap: 1rem;
}

.main-images__img {
  /* width: max(50%, 200px); */
  width: calc(50% - 1rem);
}