@media (max-width: 1280px) {
    body{
        padding-top: 0;
    }
    #navbar{
        flex-direction: column;
        position: relative;
    }
    .gallery {
        grid-template-columns: repeat(2, minmax(260px, 420px));
        gap:0.5rem;
    }
    .comp-3{
        flex-direction: column;
        gap:3rem;
    }
    .title-wrap{
        text-align: center;
    }
}

@media (max-width: 820px) {
    #navbar .links{
        flex-direction: column;
    }
    .comp-2 img{
        width:100%;
    }
  .gallery {
    grid-template-columns: 1fr;
    gap:0.5rem;
  }
  .comp-4{
    flex-direction: column;
    align-items: center;
  }
  .comp-4 div .h-1, .comp-4 div ul li, .comp-4 div a{
    text-align: center;
  }
  .comp-4 div .icons{
    display:flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
}