/*? DISEÑO RESPONSIVO*/


@media screen and (max-width: 1720px) {
    .layout {
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(24, 1fr);
    }

    .layout .img_01 {
        background-image: url("../imgs/Escultura_renacentista/Espalda 1280.jpg");
        width: 118%;
        -o-object-fit: cover;
           object-fit: cover;
        max-width: 118%; /*Para que el object-fit se aplique, modificar so se modifica el width*/
        }
    .layout .img_01_B {
        width: 118%;
        background-image: url("../imgs/Imagenes_Back/IMG_01_B.jpg");
        -o-object-fit: cover;
           object-fit: cover;
        max-width: 118%;
    }

    .layout .img_02 {
        width: 120%;
        background-image: url("../imgs/House of artists/CAM pl B - Perspectiva voladizo.jpg");
        -o-object-fit: cover;
           object-fit: cover;
        max-width: 125%;
    }
    .layout .img_02_B {
        width: 120%;
        background-image: url("../imgs/Imagenes_Back/IMG_02_B.jpg");
        -o-object-fit: cover;
           object-fit: cover;
        max-width: 120%;
    }

    .layout .img_03 {
        width: 125%;
        -o-object-fit: cover;
           object-fit: cover;
        max-width: 120%;
    }
    .layout .img_03_B {
        width: 120%;
        -o-object-fit: cover;
           object-fit: cover;
        max-width: 120%;
    }

    .layout .img_04 {
        width: 239%;
        max-width: 240%;
    }
    .layout .img_04_B {
        width: 239%;
        max-width: 240%;
    }

    .layout .img_05 {
        width: 239%;
        max-width: 240%;
    }
    .layout .img_05_B {
        width: 239%;
        max-width: 240%;
    }

    .layout .img_06 {
        width: 120%;
        max-width: 120%;
    }
    .layout .img_06_B {
        width: 120%;
        max-width: 120%;
    }

    .layout .img_07 {
        width: 120%;
        max-width: 120%;
    }
    .layout .img_07_B {
        width: 120%;
        max-width: 120%;
    }

    .layout .img_08 {
        background-image: url("../imgs/Ilustracion y PS 2020/AMY - Portada disco - Piloto JPG 01.jpg");
        width: 120%;
        -o-object-fit: cover;
           object-fit: cover;
        max-width: 120%;
    }
    .layout .img_08_B {
        background-image: url("../imgs/Imagenes_Back/AMY - Portada disco_B.jpg");
        width: 120%;
        -o-object-fit: cover;
           object-fit: cover;
        max-width: 120%;
    }

    .layout .img_09 {
        width: 120%;
        max-width: 120%;
    }
    .layout .img_09_B {
        width: 120%;
        max-width: 120%;
    }

    .layout .img_10 {
        width: 120%;
        max-width: 120%;
    }
    .layout .img_10_B {
        width: 120%;
        max-width: 120%;
    }

    .layout .img_11 {
        width: 120%;
        max-width: 120%;
    }
    .layout .img_11_B {
        width: 120%;
        max-width: 120%;
    }

    .layout .img_12 {
        width: 120%;
        max-width: 120%;
    }
    .layout .img_12_B {
        width: 120%;
        max-width: 120%;
    }
 
    .layout .img_13 {
        grid-column: span 2;
        grid-row: span 2;
        width: 125%;
        -o-object-fit: cover;
           object-fit: cover;
        max-width: 125%;
    }
    .layout .img_13_B {
        grid-column: span 2;
        grid-row: span 2;
        width: 125%;
        -o-object-fit: cover;
           object-fit: cover;
        max-width: 125%;
    }

    .layout .img_14 {
        width: 239%;
        max-width: 239%;
    }
    .layout .img_14_B {
        width: 239%;
        max-width: 239%;
    }
 
    .layout .img_15 {
        width: 120%;
        max-width: 120%;
    }
    .layout .img_15_B {
        width: 120%;
        max-width: 120%;
    }
 


    /*Ancho de tarjetas*/
    .card-side.back {
        -webkit-transform: rotateY(-180deg);
                transform: rotateY(-180deg);
        width: 118%;
    }
        .card-side.front {
        width: 118%;
    }
    
}

/*
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .layout {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(26, 1fr);
    }

}*/


@media screen and (max-width:1067px) {
    .layout {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(26, 1fr);
    }

    .layout .img_01 {
        background-image: url("../imgs/Escultura_renacentista/Espalda 1280.jpg");
        -o-object-fit: cover;
           object-fit: cover;
        max-width: 100%; /*Para que el object-fit se aplique, modificar so se modifica el width*/
        }
    
    .layout .img_01_B {
        background-image: url("../imgs/Imagenes_Back/IMG_01_B.jpg");
        -o-object-fit: cover;
           object-fit: cover;
        max-width: 100%;
    }
    

    .layout .img_04 {
        width: 100%;
        -o-object-fit: cover;
           object-fit: cover;
        max-width: 100%;
        grid-column: span 2;
        grid-row: span 2;
    }

    .layout .img_04_B {
        width: 50%;
        -o-object-fit: cover;
           object-fit: cover;
        max-width: 50%;
        grid-column: span 2;
        grid-row: span 2;
    }

    .layout .img_15 {
        width: 105%;
        height: 100%;
        grid-column: span 2;
        grid-row: span 4;
        max-width: 105%;
    }
    .layout .img_15_B {
        width: 105%;
        height: 100%;
        grid-column: span 2;
        grid-row: span 4;
        max-width: 105%;
    }
    
    .layout .img_16 {
        width: 100%;
        -o-object-fit: cover;
           object-fit: cover;
        max-width: 100%;
        grid-column: span 2;
        grid-row: span 2;
    }
    .layout .img_16_B {
        width: 120%;
        -o-object-fit: cover;
        -ms-object-fit: cover;
           object-fit: cover;
        max-width: 120%;
        grid-column: span 2;
        grid-row: span 2;
    }
}


@media screen and (max-width:767px) {
    .layout {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(26, 1fr);
    }

}