.portfolio-section{
      max-width:1300px;
      margin:auto;
    }

    .portfolio-title{
      text-align:center;
      font-size:38px;
      margin-bottom:40px;
    }

    /* GRID */

    .portfolio-grid{
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      gap:25px;
    }

    .portfolio-item{
      position:relative;
      overflow:hidden;
      border-radius:16px;
      height:320px;
      cursor:pointer;
    }

    .portfolio-item img{
      width:100%;
      height:100%;
      object-fit:cover;
      transition:0.4s;
      display:block;
    }

    .portfolio-item:hover img{
      transform:scale(1.08);
    }

    .portfolio-item::after{
      content:"Clique para ampliar";
      position:absolute;
      bottom:0;
      left:0;
      width:100%;
      padding:15px;
      text-align:center;
      background:rgba(0,0,0,0.7);
      color:#fff;
      opacity:0;
      transition:0.3s;
      font-size:15px;
    }

    .portfolio-item:hover::after{
      opacity:1;
    }

    /* LIGHTBOX */

    .lightbox{
      position:fixed;
      inset:0;
      background:rgba(0,0,0,0.95);
      display:none;
      align-items:center;
      justify-content:center;
      z-index:999;
      padding:20px;
    }

    .lightbox.active{
      display:flex;
    }

    .lightbox img{
      max-width:90%;
      max-height:90%;
      border-radius:14px;
      animation:zoom 0.3s ease;
    }

    .close-lightbox{
      position:absolute;
      top:25px;
      right:35px;
      font-size:45px;
      color:#fff;
      cursor:pointer;
    }

    @keyframes zoom{
      from{
        transform:scale(0.8);
        opacity:0;
      }

      to{
        transform:scale(1);
        opacity:1;
      }
    }

    /* RESPONSIVO */

    @media(max-width:900px){

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

    }

    @media(max-width:600px){

      .portfolio-grid{
        grid-template-columns:1fr;
      }

      .portfolio-item{
        height:280px;
      }

    }