@media only screen and (max-width: 1024px) {

      .col-s-1 {grid-column-end: span 1;}
      .col-s-2 {grid-column-end: span 2;}
      .col-s-3 {grid-column-end: span 3;}
      .col-s-4 {grid-column-end: span 4;}
      .col-s-5 {grid-column-end: span 5;}
      .col-s-6 {grid-column-end: span 6;}
      .col-s-7 {grid-column-end: span 7;}
      .col-s-8 {grid-column-end: span 8;}
      .col-s-9 {grid-column-end: span 9;}
      .col-s-10 {grid-column-end: span 10;}
      .col-s-11 {grid-column-end: span 11;}
      .col-s-12 {grid-column-end: span 12;}

      .off-s-0{grid-column-start: 1;}
      .off-s-1{grid-column-start: 2;}
      .off-s-2{grid-column-start: 3;} 
      .off-s-3{grid-column-start: 4;}
      .off-s-4{grid-column-start: 5;}
      .off-s-5{grid-column-start: 6;}
      .off-s-6{grid-column-start: 7;}
      .off-s-7{grid-column-start: 8;}
      .off-s-8{grid-column-start: 9;}
      .off-s-9{grid-column-start: 10;}
      .off-s-10{grid-column-start: 11;}
      .off-s-11{grid-column-start: 12;}
      .off-s-12{grid-column-start: 13;}

      body{
            font-size: 12px;
      }

      /*.main{
            padding-top: 1em;

      }*/


      .menu{
            width: 100%;

      }

      .menu div{
            margin-bottom: 15px;
            
      }

      .close{
            right: initial;
            left: 10px;
      }

      .menu ul{
            float: right;
      }

      .site-title{
          left: 50%;
          width: 100%;
          text-transform: uppercase;
      }

      .contact{
            
            width: 80%;
            z-index: 99999 !important;
      }



      .header{
            left: 0;
            position: fixed;
            width: 100%;
      }

      .project-gallery{
            display: none;
      }


      .close{
            position: fixed;
            right: 10px;
            width: 20%;
      }
      
      .projects{
            
            row-gap: 0;
            padding-top: 2%;
          padding-left: 10%;
          padding-right: 10% !important;
          height: 100dvh;
            position: relative;
          padding-bottom: 2%;
          padding-top: 2%;
          
          
      }

      .project{
            flex-wrap: wrap;
            margin-bottom: 10px;
            grid-column-gap: 10px;
            grid-template-columns: 10% 90%;
            padding-left: 0px;
            overflow-x: hidden;
            width: 13vh;
      }

      .year{
            padding-left: 10px;
      }

      .title{
            padding-left: 10px;
      }

      .description{
            grid-column: 2 / 4;
            padding-left: 10px;
      }

      .project-caption{
            padding-left: 12%;
            margin-left: 10px;
            padding-right: 0%;
      }



      .project-mobile-img {
            height: 300px;
            width: 100vw;
             grid-column: 1 / span 3; 
             -webkit-overflow-scrolling: touch;
             overflow-x: scroll;
              overflow-y: hidden;
              white-space: nowrap;
      }

      .image-list {
           display: inline-block;
      }

      .image-list img {
    max-height: 100%; /* Adjust image height to fit within container */
    width: auto; /* Ensure images maintain aspect ratio */
    margin-right: 20px; /* Adjust margin between images as needed */
      }


      .fancybox-caption{
            top: 40px;
            transform: translateY(0%);
            align-items: normal;
            display: none;
      }

         .fancybox-slide img {
        height: initial; 
        width: 100%; 
        
    }

      .fancybox-slide--image {
          padding: initial; !important;
      }


      .slick-slider-mob{
            position: fixed !important;
            left: 0px !important;
            top: 0px !important;
            width: 100% !important;
            height: 100% !important;
            z-index: 99993;
            background-color: white;
        }

        .slick-slider-desk{
          display: none;
        }

        .fancybox-caption,
        .fancybox-caption__body, 
        .fancybox-caption p{
            width: 95vw;
        }

               .slick-slide img {
            object-fit: contain;
        }



}