.gallery-swipe { user-select: none; width: 100%; height: 500px; /* aspect-ratio: 4 / 3; */ position: relative; /* background-color: var(--lightgray); */ }
.gallery-swipe > .discount { display: block; width: auto; position: absolute; left: 20px; top: 20px; background-color: var(--blue); color: #fff; padding: 5px; font-size: 1.2rem; border-radius: 5px;  z-index: 33}
 


.gallery-swipe > .discount:empty { display: none; }


.gallery-swipe >.gift {   background: #444; -webkit-mask: url('/static/gift.svg') no-repeat center; -webkit-mask-size: 100% auto; mask: url('/static/gift.svg') no-repeat center; mask-size: 100% auto; width: 35px; height: 40px; position: absolute; 
    right: 51px; top: 20px;z-index: 33; }


/*    .gallery-swipe >.gift:hover {  background: var(--blue); } */

.gallery-swipe >.gcaption {  top : 60px; z-index: 33;   color : var(--gray); right : 0px; position: absolute; font-size: .9rem; text-align: center;}


 

.gallery-swipe-image-container { width: 100%; height: 100%; position: relative; overflow: hidden; /* background-color: #f5f5f5; */ }
.gallery-swipe-image-container > img { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; /* Cover the entire area of the container */ /*  mix-blend-mode: multiply; */ position: absolute; transition: transform 0.5s ease-in-out; /* Transition will be toggled */ }
.gallery-swipe-ctrl-bnt { position: absolute; top: 50%; z-index: 1; /*  background-color: #fffa; */ border-radius: 50%; padding: 10px; border: 1px solid var(--blue);  width : 66px; height : 66px;}
.gallery-swipe-ctrl-bnt[btn=left] { left: 0; transform: translateX(+10px) translateY(-50%); }
.gallery-swipe-ctrl-bnt[btn=right] { right: 0; transform: translateX(-10px) translateY(-50%); }
.gallery-swipe-thumbs { user-select: none; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; }
.gallery-swipe-thumb { position: relative; width: 50px; height: 50px; margin: 5px; border: 1px solid #fff; background-color: #fff; mix-blend-mode: multiply; object-fit: contain; /* Cover the entire area of the container */ }
.gallery-swipe-thumb[active] { border: 1px solid var(--blue); }