media.css

@media (max-width: 991px) {
    .navbar__menu {
      display: flex;
    }
  
    .navbar__links {
      position: absolute;
      width: 100vw;
      height: 100vh;
      flex-direction: column;
      background: rgba(0, 0, 0, 0.97);
      font-size: 30px;
      margin: 0 -20px;
      z-index: 10;
      transform: translateX(100%);
      opacity: 0;
      transition: all 0.5s;
    }
  
    .visible {
      display: flex;
      transform: translateX(0);
      opacity: 1;
      transition: all 0.5s;
    }
  
    .navbar__link {
      padding-left: 0px;
      margin-top: 30px;
    }
  
    section {
      padding: 50px 0;
    }
  
    .home {
      flex-direction: column;
    }
  
    .home__profile {
      margin-bottom: 30px;
      margin-right: 0;
    }
  
    .home__title {
      font-size: 45px;
    }
  
    .home__title--primary,
    .home__title--secondary {
      font-size: 35px;
    }
  
    .section__title {
      font-size: 25px;
    }
  
    .section__title:after {
      width: 110px;
      height: 3px;
    }
  
    .section__subtitle {
      
      font-weight: normal;
    }
  
    .about__description {
      padding-right: 0px;
    }
  
    .about__grid {
      grid-template-columns: 1fr;
    }
  
    .skill__title {
      grid-column: span 4;
    }
  
    .about__skills {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
  
    .button--cta {
      margin-bottom: 30px;
    }
    .portfolio__grid {
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }
}

@media (max-width: 767px) {

    .home__background {
      background-image: url(./assets/bg_responsive.webp);
      background-attachment: fixed;
      background-size: cover;
      background-position: center;
    }
  
    section {
      padding: 20px 0;
    }
  
    .home__profile {
      margin-bottom: 30px;
    }
  
    .home__title {
      font-size: 30px;
    }
  
    .home__title--primary,
    .home__title--secondary {
      font-size: 25px;
    }
  
    .skill__title {
      grid-column: span 3;
    }
  
    .about__skills {
      grid-template-columns: 1fr 1fr 1fr;
    }
  
    .skill__item {
      font-size: 50px;
      padding: 5px;
      min-width: 75px;
      height: 85px;
    }
  
    .services__grid,
    .portfolio__grid {
      grid-template-columns: 1fr;
      gap: 20px;
    }
  
  
    .contact__grid {
      grid-template-columns: 1fr 1fr;
    }
  
    .contact__item {
      padding: 18px;
      border-radius: 10px;
      transition: all 0.3s;
    }
}
  
  
@media (max-width: 767px) {
  
    .skill__item {
      font-size: 50px;
      padding: 5px;
      min-width: 75px;
      height: auto;
    }
  
  
    .about__skills {
      grid-template-columns: 1fr 1fr 1fr;
    }
  
    .skill__title {
      grid-column: span 3;
    }
  
}
  
  
@media (max-width: 582px) {
  
    .skill__item {
      font-size: 50px;
      padding: 5px;
      min-width: 75px;
      height: auto;
    }
  
  
    .about__skills {
      grid-template-columns: 1fr 1fr;
    }
  
    .skill__title {
      grid-column: span 2;
    }
  
}