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

@media (min-width: 900px) and (orientation: landscape){
    #project-a {
         height: 33vw;

         grid-column: 1 / 8;
         grid-row: 1;

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

         grid-column: span 7;
    }

    #project-b {
         height: auto;

         grid-column: 8 / 13;
         grid-row: 1 / 3;

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

         grid-column: span 5;
         grid-rows: span 2;
    }

    #project-c {
         height: 33vw;

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

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

         grid-column: span 7;
    }

    #project-d {
         height: 40vw;

         grid-column: 1 / 5;
         grid-row: 3;

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

         grid-column: span 4;
    }

    #project-e {
         height: 40vw;

         grid-column: 5 / 13;
         grid-row: 3;

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

         grid-column: span 8;
    }

    #project-f {
        display: none
    }
}