/* PROJECTS */
section.project {

    /* Variables para el background-image de cada trabajo */
    @cover: "../images/nution/slice1.jpg";
    @about: "../images/nution/slice2.jpg";
    @work1: "../images/nution/slice3.jpg";
    @work2: "../images/nution/slice4.jpg";
    @work3: "../images/nution/slice5.jpg";
    @work4: "../images/nution/slice6.jpg";
    @work5: "../images/nution/slice7.jpg";
    @work6: "../images/nution/slice8.jpg";
    @work7: "../images/nution/slice9.jpg";
    @work8: "../images/nution/slice10.jpg";
    @work9: "../images/nution/slice11.jpg";
    @work10: "../images/nution/slice12.jpg";
    @work11: "../images/nution/slice13.jpg";
    @work12: "../images/nution/slice14.jpg";
    @work13: "../images/nution/slice15.jpg";
    @work14: "../images/nution/slice16.jpg";
    @work15: "../images/nution/slice17.jpg";

    .grid-project {
        grid-template-rows: repeat(12, 350px);
    }

    @size: contain;
    @repeat: repeat;
    @color: none;
    .background-image-project(@size, @repeat, @color) {
        @media screen and (max-width: 845px) {
            background-size: @size;
            background-repeat: @repeat;
            background-color: @color;
        }
    }

    /* Aplicar variables a clases */
    // Añadir o quitar dependiendo del proyecto
    .cover-image-project {
        background-image: url('@{cover}');
    }
    .about-image-project {
        background-image: url('@{about}');
    }
    .work1-image-project {
        background-image: url('@{work1}');
        .background-image-project(@size, @repeat, @color)
    }
    .work2-image-project {
        background-image: url('@{work2}');
    }
    .work3-image-project {
        background-image: url('@{work3}');
        .background-image-project(@size, @repeat, @color)
    }
    .work4-image-project {
        background-image: url('@{work4}');
        .background-image-project(@size, @repeat, @color)
    }
    .work5-image-project {
        background-image: url('@{work5}');
        .background-image-project(@size, @repeat, @color)
    }
    .work6-image-project {
        background-image: url('@{work6}');
    }
    .work7-image-project {
        background-image: url('@{work7}');
        .background-image-project(@size, @repeat, @color)
    }
    .work8-image-project {
        background-image: url('@{work8}');
    }
    .work9-image-project {
        background-image: url('@{work9}');
    }
    .work10-image-project {
        background-image: url('@{work10}');
    }
    .work11-image-project {
        background-image: url('@{work11}');
        .background-image-project(@size, @repeat, @color)
    }
    .work12-image-project {
        background-image: url('@{work12}');
    }
    .work13-image-project {
        background-image: url('@{work13}');
    }
    .work14-image-project {
        background-image: url('@{work14}');
    }
    .work15-image-project {
        background-image: url('@{work15}');
    }

    .grid-project {
        @title-font: 55px;

        @media (max-width: 845px) {
            grid-template-columns: 1fr;
            column-gap: 0px;
            grid-template-rows: @title-font repeat(17*2, 150px);

            & .min-item-project {
                min-height: 450px;
                grid-column: span 4;
                grid-row: span 4;
            }
        }
    }
}