/* PROJECTS */
section.project {

    /* Variables para el background-image de cada trabajo */
    @cover: "../images/cuartodetono/slice1.jpg";
    @about: "../images/cuartodetono/slice2.jpg";
    @work1: "../images/cuartodetono/slice3.jpg";
    @work2: "../images/cuartodetono/slice4.jpg";
    @work3: "../images/cuartodetono/slice5.jpg";
    @work4: "../images/cuartodetono/slice6.jpg";
    @work5: "../images/cuartodetono/slice7.jpg";
    @work6: "../images/cuartodetono/slice8.jpg";
    @work7: "../images/cuartodetono/slice9.jpg";
    @work8: "../images/cuartodetono/slice10.jpg";
    @work9: "../images/cuartodetono/slice11.jpg";
    @work10: "../images/cuartodetono/slice12.jpg";
    @work11: "../images/cuartodetono/slice13.jpg";
    @work12: "../images/cuartodetono/slice14.jpg";
    @work13: "../images/cuartodetono/slice15.jpg";
    @work14: "../images/cuartodetono/slice16.jpg";
    @work15: "../images/cuartodetono/slice17.jpg";
    @work16: "../images/cuartodetono/slice18.jpg";
    @work17: "../images/cuartodetono/slice19.jpg";
    @work18: "../images/cuartodetono/slice20.jpg";
    @work19: "../images/cuartodetono/slice21.jpg";
    @work20: "../images/cuartodetono/slice22.jpg";
    @work21: "../images/cuartodetono/slice23.jpg";
    @work22: "../images/cuartodetono/slice24.jpg";
    @work23: "../images/cuartodetono/slice25.jpg";
    @work24: "../images/cuartodetono/slice26.jpg";
    @work25: "../images/cuartodetono/slice27.jpg";
    @work26: "../images/cuartodetono/slice28.jpg";
    @work27: "../images/cuartodetono/slice29.jpg";
    @work28: "../images/cuartodetono/slice30.jpg";
    @work29: "../images/cuartodetono/slice31.jpg";
    @work30: "../images/cuartodetono/slice32.jpg";
    @work31: "../images/cuartodetono/slice33.jpg";
    @work32: "../images/cuartodetono/slice34.jpg";
    @work33: "../images/cuartodetono/slice35.jpg";
    @work34: "../images/cuartodetono/slice36.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}');
    }
    .about-image-project {
        background-image: url('@{about}');
    }
    .work1-image-project {
        background-image: url('@{work1}');
    }
    .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}');
    }
    .work5-image-project {
        background-image: url('@{work5}');
    }
    .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}');
        .background-image-project(@size, @repeat, @color);
    }
    .work10-image-project {
        background-image: url('@{work10}');
        .background-image-project(@size, @repeat, @color);
    }
    .work11-image-project {
        background-image: url('@{work11}');
    }
    .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}');
        .background-image-project(@size, @repeat, @color);
    }
    .work15-image-project {
        background-image: url('@{work15}');
    }
    .work16-image-project {
        background-image: url('@{work16}');
    }
    .work17-image-project {
        background-image: url('@{work17}');
        background-position: 100% 0%;
    }
    .work18-image-project {
        background-image: url('@{work18}');
        .background-image-project(@size, @repeat, @color);
    }
    .work19-image-project {
        background-image: url('@{work19}');
        .background-image-project(@size, @repeat, @color);
    }
    .work20-image-project {
        background-image: url('@{work20}');
    }
    .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}');
        .background-image-project(@size, @repeat, @color);
    }
    .work27-image-project {
        background-image: url('@{work27}');
        .background-image-project(@size, @repeat, @color);
    }
    .work28-image-project {
        background-image: url('@{work28}');
    }
    .work29-image-project {
        background-image: url('@{work29}');
    }
    .work30-image-project {
        background-image: url('@{work30}');
    }
    .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}');
    }

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

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

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