aside {
  background-color: light-dark(#eeeee0, #11111f);
  color: light-dark(#11111f, #eeeee0);
  display: flex;
  flex: 0 0 16em;
  flex-direction: column;
  gap: 2em;
  padding: 5vmin;

  > div,
  > nav {
    > p,
    > h3 {
      margin: 0;
    }
  }

  #cs-portrait {
    aspect-ratio: 1;
    filter: drop-shadow(0rem 0.25rem 0.25rem rgba(0, 0, 0, 0.5));
    inline-size: 100%;
  }

  h2 {
    font-family: "Russo One", sans-serif;
    margin-block-start: 0;
  }

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  p:last-child {
    margin-block-end: 0;
  }
}

@media (600px <= width < 1024px) {
  aside {
    display: grid;
    gap: 2em 0;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, auto);

    .avatar {
      grid-area: 1 / 1 / 2 / 2;
    }
    .about {
      grid-area: 1 / 2 / 2 / 4;
    }
    .socials {
      grid-area: 2 / 1 / 3 / 2;
    }
    .explore {
      grid-area: 2 / 2 / 3 / 3;
    }
    .projects {
      grid-area: 2 / 3 / 3 / 4;
    }
    .copyright {
      grid-area: 3 / 1 / 4 / 4;
    }
  }
  aside #cs-portrait {
    inline-size: clamp(100px, 15vw, 150px);
  }
}

@media (width < 600px) {
  aside #cs-portrait {
    inline-size: max(200px, 50%);
  }
}