.anchocontenedor {width:100%;max-width: 1072px; margin: 0 auto;}
#escaparate, #escaparate * {box-sizing: border-box; line-height: normal;}
#escaparate img {width: revert; height: revert; max-width: revert;}
#escaparate {width: 100%; font-family: "inter";position:relative;margin-bottom:20px;}
#escaparate:before {content:"";z-index:-1; height: 157px; width: 100%; background-color: #ffefe1; position: absolute; left: 0; top:0;}
#escaparate ul {height: 100%;  list-style: none; height:251px;margin: 0 auto; padding: 0; display: grid; }
#escaparate ul[num-elementos="5"] {grid-template-columns: 1fr 1fr 1fr 1fr 1fr;gap: 15px;}
#escaparate ul[num-elementos="4"] {grid-template-columns: 1fr 1fr 1fr 1fr;gap: 15px;}
#escaparate ul[num-elementos="3"] {grid-template-columns: 1fr 1fr 1fr; gap: 14px;}
#escaparate ul[num-elementos="2"] {grid-template-columns: 1fr 1fr; gap: 14px;}

    @media (max-width: 1080px) {
    #escaparate {padding: 0 19px;}
    .anchocontenedor { max-width: 500px;}
    #escaparate ul[num-elementos="2"] {grid-template-columns: 1fr;}
    #escaparate ul[num-elementos="3"], #escaparate ul[num-elementos="4"], #escaparate ul[num-elementos="5"] {grid-template-columns: 1fr 1fr; }
    #escaparate ul[num-elementos="4"], #escaparate ul[num-elementos="5"], #escaparate ul[num-elementos="3"], #escaparate ul[num-elementos="2"], #escaparate ul[num-elementos="1"] {height: auto; padding-bottom:20px;}
    #escaparate ul {gap: 10px !important}
    }

/*CINTILLO*/
#escaparate > header span {font-weight: 600;font-family: Isidora,Helvetica,Arial,sans-serif; text-transform: uppercase;font-size: 22px;padding: 12px 0px 8px 0px; border-top: 3px solid #ff7328; display:inline-block;margin:0;margin-bottom: 11px;}
    @media (max-width: 1080px) {
    #escaparate > header span {font-size: 19px;}
    }

/*ITEMS*/
#escaparate ul li {position:relative;box-shadow: 0px 6px 6px -3px rgba(0,0,0,0.24);height:100%;overflow:hidden; border-radius:10px; position: relative;}
#escaparate ul li a {overflow:hidden;display:block;height:100%; width:100%;}

    @media (max-width: 1080px) {
    #escaparate ul[num-elementos="3"] li, #escaparate ul[num-elementos="4"] li, #escaparate ul[num-elementos="2"] li, #escaparate ul[num-elementos="1"] li, #escaparate ul[num-elementos="5"] li {height: 143px;}
    #escaparate ul[num-elementos="3"] li:first-of-type, #escaparate ul[num-elementos="5"] li:first-of-type {grid-column: 1 / span 2;}
    }

/*FOTO PRINCIPAL*/
#escaparate ul li img.img-escaparate {width: 1142px;transition: all .2s ease;}
#escaparate ul li:hover img.img-escaparate {filter: brightness(1.1)}
#escaparate ul[num-elementos="5"] li img.img-escaparate {margin-left: -70px;}
#escaparate ul[num-elementos="4"] li img.img-escaparate {margin-left: -70px;}
#escaparate ul[num-elementos="3"] li img.img-escaparate {margin-left: -25px;}
#escaparate ul[num-elementos="2"] li img.img-escaparate {margin-left: -30px;}
#escaparate ul[num-elementos="1"] li img.img-escaparate {margin-left:-70px;margin-top: -251px}

    @media (max-width: 1080px) {
    #escaparate ul li img.img-escaparate {width: 850px;}
    #escaparate ul[num-elementos="3"] li img.img-escaparate, #escaparate ul[num-elementos="4"] li img.img-escaparate, #escaparate ul[num-elementos="5"] li img.img-escaparate {width: 420%;min-width: 730px;margin-left: -50px; }
    #escaparate ul[num-elementos="3"] li:first-of-type img.img-escaparate, #escaparate ul[num-elementos="2"] li img.img-escaparate, #escaparate ul[num-elementos="1"] li img.img-escaparate {width: 850px;margin-top: -10px;margin-left: -20px;}
}


/*ETIQUETA*/
#escaparate ul li span.etiqueta-escaparate {color: #1d1d1d;transition: .2s ease all;text-transform: uppercase; font-weight: 800;z-index:9;font-size: 13px;position: absolute; top: 12px; left:12px; border-radius: 5px; padding: 3px 6px;background-color: rgba(255,255,255,0.7);}
#escaparate ul li:hover span.etiqueta-escaparate {background-color: rgba(255,255,255,0.8);}

    @media (max-width: 1080px) {
    #escaparate ul li span.etiqueta-escaparate {font-size: 11px; padding: 2px 5px;top: 8px; left:8px;}
    }

/*HEADER*/
#escaparate ul li header {transition: all .2s ease;justify-content: center;position: absolute;align-items: center;left:0; right:0; margin: 0 auto; bottom: 0;z-index:2; height: 100px; width:100%;display:flex;padding-bottom:8px; }
#escaparate ul li header:before {content:""; position:absolute;}
#escaparate ul[num-elementos="4"] li header, #escaparate ul[num-elementos="3"] li header, #escaparate ul[num-elementos="5"] li header {height:100px;}
#escaparate ul[num-elementos="4"] li header:before, #escaparate ul[num-elementos="3"] li header:before, #escaparate ul[num-elementos="5"] li header:before {width:100%; left:0; bottom:0;height:150px;background: linear-gradient(to top, var(--color), rgba(255, 0, 0, 0));}
#escaparate ul[num-elementos="2"] li header {height:100%; width: 260px;right:0; left: unset;padding-bottom: 0;}
#escaparate ul[num-elementos="2"] li header:before {background: linear-gradient(to left, var(--color), rgba(255, 0, 0, 0));right:0; width: 100%; height:100%; align-items: center;padding-bottom:0;}
#escaparate ul[num-elementos="1"] li header {height:100%; width: 340px;right:0; left: unset;padding-bottom: 0;}
#escaparate ul[num-elementos="1"] li header:before {background: linear-gradient(to left, var(--color), rgba(255, 0, 0, 0));right:0;width: 500px; height:100%; justify-content: flex-end;align-items: center;padding-bottom:0;}

    @media (max-width: 1080px) {
        #escaparate ul li header:before {height: 70px !important;}
        #escaparate ul[num-elementos="4"] li header, #escaparate ul[num-elementos="3"] li header,  #escaparate ul[num-elementos="5"] li header {height: 71px;padding-bottom:0;}
    #escaparate ul[num-elementos="3"] li:first-of-type header, #escaparate ul[num-elementos="2"] li header, #escaparate ul[num-elementos="1"] li header {padding:10px 10px 0px 0;justify-content: flex-end;align-items: center;height: 100%;width: 130px;left:unset; right: 0;}
    #escaparate ul[num-elementos="3"] li:first-of-type header:before, #escaparate ul[num-elementos="2"] li header:before, #escaparate ul[num-elementos="1"] li header:before {top:0;height: 100% !important;width: 130px;left:unset; right: 0;background: linear-gradient(to left, var(--color), rgba(255, 0, 0, 0));}
    }


/*LOGO*/
#escaparate ul li header img.logo-escaparate {position:relative; z-index:9;}
#escaparate ul[num-elementos="5"] li header img.logo-escaparate {max-width: 160px;max-height: 80px;margin-bottom:10px; height:auto;object-fit: contain;}
#escaparate ul[num-elementos="4"] li header img.logo-escaparate {max-width: 160px;max-height: 80px;margin-bottom:10px; height:auto;object-fit: contain;}
#escaparate ul[num-elementos="3"] li header img.logo-escaparate {max-width: 180px;max-height: 80px; height:auto;object-fit: contain;}
#escaparate ul[num-elementos="2"] li header img.logo-escaparate {max-width: 180px;max-height: 100px; height:auto;object-fit: contain;}
#escaparate ul[num-elementos="1"] li header img.logo-escaparate {width: 180px;margin-right: 10%;max-height: 140px; height:auto;object-fit: contain;}


    @media (max-width: 1080px) {
    #escaparate ul[num-elementos="3"] li:first-of-type img.logo-escaparate, #escaparate ul[num-elementos="2"] li img.logo-escaparate, #escaparate ul[num-elementos="1"] li img.logo-escaparate {max-width: 105px !important;margin-right:0 !important;}
    #escaparate ul[num-elementos="3"] li header img.logo-escaparate, #escaparate ul[num-elementos="4"] li header img.logo-escaparate, #escaparate ul[num-elementos="5"] li header img.logo-escaparate {margin-bottom:0;width: auto; max-width: 85%;max-height: 50px !important;}
    #escaparate ul[num-elementos="3"] li:first-of-type header img.logo-escaparate {max-height: 60px !important}
}