/* PROJECTS */
section.project {

    /* Variables para el background-image de cada trabajo */
    @cover: "../images/madblading/slice1.jpg";
    @about: "../images/madblading/slice2.jpg";
    @work1: "../images/madblading/slice3.jpg";
    @work2: "../images/madblading/slice4.jpg";
    @work3: "../images/madblading/slice5.jpg";
    @work4: "../images/madblading/slice6.jpg";
    @work5: "../images/madblading/slice7.jpg";
    @work6: "../images/madblading/slice8.jpg";
    @work7: "../images/madblading/slice9.jpg";
    @work8: "../images/madblading/slice10.jpg";
    @work9: "../images/madblading/slice11.jpg";
    @work10: "../images/madblading/slice12.jpg";
    @work11: "../images/madblading/slice13.jpg";
    @work12: "../images/madblading/slice14.jpg";
    @work13: "../images/madblading/slice15.jpg";
    @work14: "../images/madblading/slice16.jpg";
    @work15: "../images/madblading/slice17.jpg";
    @work16: "../images/madblading/slice18.jpg";
    @work17: "../images/madblading/slice19.jpg";
    @work18: "../images/madblading/slice20.jpg";
    @work19: "../images/madblading/slice21.jpg";
    @work20: "../images/madblading/slice22.jpg";
    @work21: "../images/madblading/slice23.jpg";
    @work22: "../images/madblading/slice24.jpg";
    @work23: "../images/madblading/slice25.jpg";
    @work24: "../images/madblading/slice26.jpg";
    @work25: "../images/madblading/slice27.jpg";
    @work26: "../images/madblading/slice28.jpg";
    @work27: "../images/madblading/slice29.jpg";
    @work28: "../images/madblading/slice30.jpg";
    @work29: "../images/madblading/slice31.jpg";
    @work30: "../images/madblading/slice32.jpg";
    @work31: "../images/madblading/slice33.jpg";
    @work32: "../images/madblading/slice34.jpg";
    @work33: "../images/madblading/slice35.jpg";
    @work34: "../images/madblading/slice36.jpg";
    @work35: "../images/madblading/slice37.jpg";
    @work36: "../images/madblading/slice38.jpg";
    @work37: "../images/madblading/slice39.jpg";
    @work38: "../images/madblading/slice40.jpg";
    @work39: "../images/madblading/slice41.jpg";
    @work40: "../images/madblading/slice42.jpg";

    .grid-project {
        grid-template-rows: repeat(24, 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}');
        .background-image-project(@size, @repeat, @color);
    }
    .about-image-project {
        background-image: url('@{about}');
    }
    .work1-image-project {
        background-image: url('@{work1}');
    }
    .work2-image-project {
        background-image: url('@{work2}');
        .background-image-project(@size, @repeat, @color);
    }
    .work3-image-project {
        background-image: url('@{work3}');
    }
    .work4-image-project {
        background-image: url('@{work4}');
    }
    .work5-image-project {
        background-image: url('@{work5}');
        .background-image-project(@size, @repeat, @color);
    }
    .work6-image-project {
        background-image: url('@{work6}');
        .background-image-project(@size, @repeat, @color);
    }
    .work7-image-project {
        background-image: url('@{work7}');
        .background-image-project(@size, @repeat, @color);
    }
    .work8-image-project {
        background-image: url('@{work8}');
        .background-image-project(@size, @repeat, @color);
    }
    .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}');
        .background-image-project(@size, @repeat, @color);
    }
    .work13-image-project {
        background-image: url('@{work13}');
        .background-image-project(@size, @repeat, @color);
    }
    .work14-image-project {
        background-image: url('@{work14}');
    }
    .work15-image-project {
        background-image: url('@{work15}');
        .background-image-project(@size, @repeat, @color);
    }
    .work16-image-project {
        background-image: url('@{work16}');
    }
    .work17-image-project {
        background-image: url('@{work17}');
        .background-image-project(@size, @repeat, @color);
    }
    .work18-image-project {
        background-image: url('@{work18}');
        background-position: 25% 0%;
    }
    .work19-image-project {
        background-image: url('@{work19}');
    }
    .work20-image-project {
        background-image: url('@{work20}');
        .background-image-project(@size, @repeat, @color);
    }
    .work21-image-project {
        background-image: url('@{work21}');
    }
    .work22-image-project {
        background-image: url('@{work22}');
    }
    .work23-image-project {
        background-image: url('@{work23}');
    }
    .work24-image-project {
        background-image: url('@{work24}');
    }
    .work25-image-project {
        background-image: url('@{work25}');
    }
    .work26-image-project {
        background-image: url('@{work26}');
    }
    .work27-image-project {
        background-image: url('@{work27}');
    }
    .work28-image-project {
        background-image: url('@{work28}');
    }
    .work29-image-project {
        background-image: url('@{work29}');
    }
    .work30-image-project {
        background-image: url('@{work30}');
        .background-image-project(@size, @repeat, @color);
    }
    .work31-image-project {
        background-image: url('@{work31}');
    }
    .work32-image-project {
        background-image: url('@{work32}');
        .background-image-project(@size, @repeat, @color);
    }
    .work33-image-project {
        background-image: url('@{work33}');
    }
    .work34-image-project {
        background-image: url('@{work34}');
    }
    .work35-image-project {
        background-image: url('@{work35}');
        .background-image-project(@size, @repeat, @color);
    }
    .work36-image-project {
        background-image: url('@{work36}');
    }
    .work37-image-project {
        background-image: url('@{work37}');
        .background-image-project(@size, @repeat, @color);
    }
    .work38-image-project {
        background-image: url('@{work38}');
        .background-image-project(@size, @repeat, @color);
    }
    .work39-image-project {
        background-image: url('@{work39}');
        .background-image-project(@size, @repeat, @color);
    }
    .work40-image-project {
        background-image: url('@{work40}');
    }

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

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

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