:root {
  --text-color: #333333;
  --bg-color: #fafafa;
  --accent-color: #fce8ef;
  --mt-color: #e89ab0;
  --works-bg-color: #e9f6ef;
}

@media (max-width: 768px) {
  html {
    font-size: 15px;
  }

  h1 {
    height: 40px;
    font-size: 1.5rem;
  }

  nav {
    ul {
      flex-wrap: wrap;
      gap: 0 20px;
    }
  }

  #fv {
    height: 50vw;
    min-height: 250px;
    background-position: center;
  }

  .fv-cp {
    font-size: 1.5rem;
  }
  .fv-name {
    font-size: 3rem;
  }

  #about,
  #works {
    padding: 30px 20px;
  }

  .about-wrap {
    flex-direction: column;

    img {
      aspect-ratio: 1;
      object-fit: cover;
      max-width: 200px;
    }
  }

  .works-ba {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  html {
    font-size: 13px;
  }
}