.banner-gallery { position: relative; width: 100%; height: 400px; border-radius: 12px; background-color: #222; overflow: hidden; }

.banner-gallery .ico { position: absolute; font-size: 20px; color: white; font-style: normal; width: 24px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: 16px; border-radius: 12px; background-color: rgba(0,0,0,.4); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); cursor: pointer; z-index: 3; }
.banner-gallery .ico:hover { background-color: rgba(0,0,0,.8); }
.banner-gallery .ico:before { content: ''; width: 16px; height: 16px; background-position: center center; background-size: 16px 16px; background-repeat: no-repeat; }
.banner-gallery .ico.arrow-left { top: calc(50% - 20px); left: 20px; }
.banner-gallery .ico.arrow-right { top: calc(50% - 20px); right: 20px; }
.banner-gallery .ico.arrow-left:before { background-image: url(/images/ico/ico-arrow-down-white.svg); transform: rotate(90deg); }
.banner-gallery .ico.arrow-right:before { background-image: url(/images/ico/ico-arrow-down-white.svg); transform: rotate(-90deg); }
.banner-gallery .count { position: absolute; bottom: 30px; left: 35px; font-size: 13px; color: white; font-family: Inter, Arial; z-index: 2; }

.banner-gallery .item-wrap { position: relative; left: 0; top: 0; display: flex; min-width: 100%; height: 100%; transition: all 0.15s ease-out; }
.banner-gallery .item-wrap picture { position: relative; float: left; overflow: hidden; width: 100%; height: 100%; flex-shrink: 0; }
.banner-gallery .item-wrap picture .photo { position: absolute; display: block; height: 100%; width: 100%; object-fit: cover; user-drag: none; -webkit-user-drag: none; user-select: none; }

@media screen and (max-width: 750px) {
.banner-gallery { height: 300px; }
}