@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

@media (min-width: 600px){

    .label {
             cursor: pointer;
             gap: 0.4vw;

             display: flex;
             padding: 0.4vw 0.8vw 0.4vw 0.8vw;

             grid-column: 1;
             grid-row: 1;

             align-items: center;

             border-radius: 0.15vw;
             background: black;
             height: 1.5vw;
             font-size: 1vw;
             width: fit-content;
         }

         .like {
             height: 1.2vw;
             width: 1.2vw;
         }

         .content-container{
                display: grid;
                grid-auto-columns: repeat (12, auto);
                padding: 1vw;
                gap: 1vw;
            }

    #project-a {
         height: 50vw;

         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: 66vw;

         grid-column: 1 / 6;
         grid-row: 4;

         background-image: url('./../resources/gen_plan.jpg');
         background-repeat: no-repeat;
         background-size: 100% 100%;

         grid-column: span 5;
    }

    #project-c {
         height: 40vw;

         grid-column: 1 / 13;
         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: 40vw;

         grid-column: 9 / 13;
         grid-row: 2;

         background-image: url('./../resources/decorations.jpeg');
         background-repeat: no-repeat;
         background-size: 100% 100%;

         grid-column: span 4;
    }

    #project-e {
         height: 40vw;

        grid-column: 1 / 9;
        grid-row: 2;

         background-image: url('./../resources/showroom.jpg');
         background-repeat: no-repeat;
         background-size: 100% 100%;

         grid-column: span 8;
    }

     #project-f {
            height: auto;

            grid-column: 7 / 13;
            grid-row: 4;

            background-image: url('./../resources/reconstruction.jpg');
            background-repeat: no-repeat;
            background-size: 100% 100%;

            grid-column: span 7;
        }
}