h1:not(#logo) {
  opacity: 0.5;
}

main section#logoContainer {
  grid-column: 1 / span 3;
  grid-row: 1 / span 2;
}

main h1#logo {
  font-family: "Baunk", "Literata", serif;
}

main section#intro {
  grid-column: 1 / span 3;
  grid-row: 2 / span 2;
}

main section#picture {
  grid-column: 1 / span 3;
  grid-row: 4 / span 3;
}

main section#featured {
  grid-column: 1 / span 2;
  grid-row: 7 / span 2;
}

main section#socials {
  grid-column: 1 / span 1;
  grid-row: 10 / span 2;
}

.linkList {
  display: flex;
  flex-direction: column;
}

.linkList a {
  width: 100%;
  display: flex;
  align-items: center;
  height: 3em;
  border-bottom: 1px solid var(--color-light);
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
}

a.project span:nth-of-type(1) {
  margin: auto 25px auto 0;
  opacity: 0.5;
}

a.project span:nth-of-type(2)::after {
  content: "";
  position: absolute;
  right: 0;
  width: 100px; /* adjust how far the gradient stretches */
  height: 1rem;
  pointer-events: none;
  background: linear-gradient(to right, transparent, black);
}

/* tablet breakpoint */
@media (min-width: 512px) {
  main section#intro {
    grid-column: 1 / span 3;
    grid-row: 3 / span 2;
  }

  main section#picture {
    grid-column: 3 / span 4;
    grid-row: 6 / span 6;
  }

  main section#featured {
    grid-column: 1 / span 2;
    grid-row: 6 / span 4;
  }

  main section#socials {
    grid-column: 5 / span 1;
    grid-row: 3 / span 2;
  }
}

/* desktop breakpoint */
@media (min-width: 1024px) {
  main section#intro {
    grid-column: 2 / span 2;
    grid-row: 3 / span 3;
  }

  main section#picture {
    grid-column: 5 / span 4;
    grid-row: 3 / span 3;
  }

  main section#featured {
    grid-column: 2 / span 2;
    grid-row: 5 / span 2;
  }

  main section#socials {
    grid-column: 5 / span 1;
    grid-row: 7 / span 1;
  }
}

@media (hover: hover) {
  .linkList a {
    padding: 1px 0;
  }
}