/* Responsive adjustments for the refreshed fluid layout */

@media (max-width: 1200px) {
  .content{
    padding:0 clamp(1.25rem, 4vw, 2.5rem);
  }
}

@media (max-width: 960px) {
  .content{
    margin:clamp(2rem, 8vw, 4rem) auto clamp(2.5rem, 10vw, 5rem);
  }

  .content .text-intro{
    margin:clamp(2.5rem, 8vw, 4.5rem) auto clamp(1.5rem, 6vw, 3.5rem);
  }
}

@media (max-width: 720px) {
  .content .text-intro{
    text-align:center;
  }

  .content .text-intro p{
    text-align:center;
  }

  .portfolio-grid{
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  }

  .opacity-nav{
    padding:clamp(3rem, 12vh, 6rem) clamp(1.5rem, 6vw, 2.5rem);
    overflow:auto;
  }

  ul.menu-fullscreen{
    position:static;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:clamp(1.5rem, 6vh, 2.75rem);
    width:100%;
    height:auto;
    margin:auto;
  }

  ul.menu-fullscreen li{
    font-size:clamp(1.6rem, 1.3rem + 2vw, 2.4rem);
    line-height:1.35;
  }

  ul.menu-fullscreen li > a{
    display:block;
    width:100%;
    padding:clamp(0.85rem, 3vh, 1.4rem);
  }
}

@media (max-width: 540px) {
  .content{
    padding:0 clamp(1rem, 6vw, 1.75rem);
  }

  .portfolio-grid{
    grid-template-columns:1fr;
    gap:clamp(1.25rem, 6vw, 2rem);
  }

  li.grid-item{
    border-radius:20px;
  }
}

@media (max-width: 420px) {
  .grid-hover h1,
  .grid-hover h2{
    font-size:clamp(1.3rem, 1.1rem + 1vw, 1.6rem);
  }

  .grid-hover p{
    font-size:clamp(0.95rem, 0.9rem + 0.4vw, 1.05rem);
  }
}

@media (hover: none) {
  .grid-hover{
    opacity:1;
    transform:none;
    background:linear-gradient(180deg, rgba(15, 23, 42, 0.55) 0%, rgba(15, 23, 42, 0.78) 100%);
  }

  li.grid-item img{
    transform:none !important;
  }
}