.sr-ficheimageviewer { display: grid;min-height:341px;grid-template-columns: 100%;grid-template-rows: auto 108px;row-gap: 1em; position:relative;box-sizing: border-box;outline:none;
    & .x-mainview {overflow:hidden;display:flex; align-items: center;}
    & .x-mainview .x-fullscreen-close-button{display:none;box-sizing: border-box;}
    & .x-thumbnail-carrousel {display: flex; flex-flow: row nowrap; gap:1em; align-items: center; justify-content: center;margin:0;box-sizing: border-box;}
    & .x-thumbnail-image {width: 100px;height:100px;object-fit: contain;cursor:pointer;box-sizing: border-box;}
    & .x-thumbnail {display: flex;flex-flow: column;justify-content: center;align-items: center;box-sizing: border-box;padding:2px;position:relative;}
    & .x-thumbnail .x-thumbnail-image {box-shadow:0 0 0 1px var(--bobtn1);border-radius: 8px;padding:2px;background: #fff;}
    & .x-thumbnail.x-current .x-thumbnail-image {box-shadow:0 0 0 1px #3a9400}
    & .x-thumbnail .x-badge {background-size: contain;background-position: center center;width: 32px;height: 32px;position: absolute;top: 50%;left: 50%;background-repeat: no-repeat;transform: translate(-50%, -50%);cursor:pointer;pointer-events: none;}
    & .x-thumbnail .x-badge-video {background-image: url(/src/images/icons/svg/video-red.svg);}
    & .x-mainview-image{ width:100%; height:100%;background-repeat: no-repeat;background-size: contain;background-position: center center;background-color: #fff; border-radius:16px;display: block;box-sizing: border-box;cursor:zoom-in;}
    & iframe.x-mainview-image{ width:100%; height: auto;aspect-ratio: 16 / 9}
    & .x-button-prevnext{position:absolute; cursor:pointer;height:3em;width:3em;background-repeat: no-repeat; background-size: contain; background-position: center center;background-color:rgba(255,255,255,.4);box-sizing: border-box;transition: opacity .5s ease .1s;opacity:0;border-radius:50%;z-index: 10;}
    & .x-button-prev{background-image:url('/src/images/icons/svg/pagerprev.svg');left: 0;}
    & .x-button-next{background-image:url('/src/images/icons/svg/pagernext.svg');right: 0;}
    & .gfw-hscroller {justify-content: center;    height: auto!important;}
    & .gfw-hscroller .x-container {display: flex;flex-flow: row nowrap; position: inherit;}
}

.sr-ficheimageviewer.x-hide-carrousel {grid-template-rows: auto}
.sr-ficheimageviewer.x-hide-carrousel .gfw-hscroller {display: none;}
.sr-ficheimageviewer.x-hide-carrousel .x-thumbnail-carrousel {display: none;}

.sr-ficheimageviewer:fullscreen {background-color: #fff;grid-template-rows: auto 108px;padding:5em;
    & .x-mainview {background-color: #fff;width:100%;height:100%;}
    & .x-mainview .x-fullscreen-close-button{background-image: url('/src/images/icons/svg/close.svg');background-position:center center; background-size: contain; background-color:var(--bgcolor-gray);color:#000;height:3em;width:3em;display:block;position:absolute;top:0;right:0;cursor:pointer;}
    & .x-mainview .x-mainview-image{ width:100%; height:100%;cursor:zoom-out;}
    & .x-button-prev{top:50%;}
    & .x-button-next{top:50%;}
    & .gfw-hscroller {justify-content:center;}
}

.sr-ficheimageviewer:empty{display:none}

@media screen and (min-width:500px) {
    .sr-ficheimageviewer {min-height: 496px;}
}