/* small screens */
    @media(max-width:920px){
      .hero{flex-direction:column;align-items:flex-start;padding-bottom:12px}
      h1{font-size:34px}
      .hero-right{width:100%;justify-content:center}
      .welcome{flex-direction:column-reverse}
      .hero-card{width:280px;height:320px}
      .welcome .img .card{width:260px;height:260px}
      .expertise{flex-direction:column}
      .contact{flex-direction:column}
      .portfolio-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      }
    }

    @media(max-width:520px){
      .wrap{padding:18px}
      h1{font-size:28px}
      .brand{font-size:18px}
      .portfolio-grid {
        grid-template-columns: 1fr;
      }
      .portfolio-item {
        height: 220px;
      }
      .contact {
        padding: 24px;
      }
    }