@media only screen and (max-width: 500px) {
  body {
    font-size: 12px;
  }

  /* -------- H E A D E R -------- */

  header[role="banner"] {
    display: flex;
    justify-content: center;
    font-size: 1.25em;
    gap: calc(var(--spacing) / 5);
  }

  .theme {
    position: unset;
    font-size: 1.75em;
  }

  nav ul {
    gap: calc(var(--spacing) / 5);
  }

  nav ul li {
    padding: calc(var(--spacing) / 10) calc(var(--spacing) / 4) calc(var(--spacing) / 10) calc(var(--spacing) / 4);
    border: solid 3.5px var(--borderColor);
  }

  /* -------- H O M E -------- */

  .reception-img {
    margin: calc(var(--spacing) * 2) 0;
  }

  /* -------- P R O J E T S -------- */

  .projects ul {
    display: flex;
    flex-direction: column;
  }

  .projects figcaption {
    font-size: 1.2em;
  }

  /* -------- P R O J E T -------- */

  .project-top-section {
    display: flex;
    flex-direction: column;
    margin: calc(var(--spacing)) calc(var(--spacing) / 1.5) 0 calc(var(--spacing) / 1.5);
    gap: calc(var(--spacing) / 2);

    .description h2 {
      font-size: 3em;
      line-height: 1em;
    }

    .description p {
      font-size: 1.5em;
      line-height: 1.25em;
    }
  }

  .project-bottom-section {
    display: flex;
    flex-direction: column;

    figure {
      margin-bottom: calc(var(--spacing) / 5);
    }
  }
}




@media only screen and (max-width: 900px) {

  .projects ul {
    grid-template-columns: repeat(2, 1fr);
  }
}