@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
 @media only screen and (hover: none) and (pointer: coarse){
     footer{
         height: 24vw;
         background: black;
         display: flex;
         padding: 2vw;
         align-items:center;
    }
     header {
         height: 6vw;
         background: black;
         display: flex;
         align-items: center;
         padding: 3vw;
    }
     .logo {
         cursor: pointer;
         font-weight: 600;
         font-size: 4vw;
    }
     .navigation{
         display: flex;
         margin-left: auto;
         gap: 2.4vw;
         font-weight: 600;
         font-size: 2.4vw;
    }
     .content-container{
         display: grid;
         grid-auto-columns: repeat (12, auto);
         padding: 1.5vw;
         gap: 1.5vw;
    }
     .label {
         cursor: pointer;
         gap: 1.2vw;
         display: flex;
         padding: 1.2vw 2.4vw 1.2vw 2.4vw;
         grid-column: 1;
         grid-row: 1;
         align-items: center;
         border-radius: 0.5vw;
         background: black;
         height: 4.5vw;
         font-size: 3vw;
         width: fit-content;
    }
     .like {
         height: 3.6vw;
         width: 3.6vw;
    }
     .permission{
         width: 60vw;
         margin-left: auto;
         margin-right: 1vw;
         font-weight: 300;
         font-size: 2.5vw;
    }

    .info{
        background: black;
        height: fit-content;
        padding: 8vw;

        font-weight: 300;
        font-size: 3vw;
    }

     #project-a {
         height: 60vw;
         grid-column: 1;
         grid-row: 1;
         background-image: url('./../resources/lakehouse.jpg');
         background-repeat: no-repeat;
         background-size: 100% 100%;
         grid-column: span 12;
    }
     #project-b {
         height: 150vw;
         grid-column: 1;
         grid-row: 2;
         background-image: url('./../resources/gen_plan.jpg');
         background-repeat: no-repeat;
         background-size: 100% 100%;
         grid-column: span 12;
    }
     #project-c {
         height: 66vw;
         grid-column: 1;
         grid-row: 3;
         background-image: url('./../resources/bali_foodmall.webp');
         background-repeat: no-repeat;
         background-size: 100% 100%;
         grid-column: span 12;
    }
     #project-d {
         height: 150vw;
         grid-column: 1;
         grid-row: 4;
         background-image: url('./../resources/decorations.jpeg');
         background-repeat: no-repeat;
         background-size: 100% 100%;
         grid-column: span 12;
    }
     #project-e {
         height: 60vw;
         grid-column: 1;
         grid-row: 5;
         background-image: url('./../resources/showroom.jpg');
         background-repeat: no-repeat;
         background-size: 100% 100%;
         grid-column: span 12;
    }
     #project-f {
         height: 110vw;
         grid-column: 1;
         grid-row: 6;
         background-image: url('./../resources/reconstruction.jpg');
         background-repeat: no-repeat;
         background-size: 100% 100%;
         grid-column: span 12;
    }
}