.article-gallery { position: relative; width: 100%; aspect-ratio: 3 / 4; min-height: 60px; height: 460px; margin: 20px 0; border-radius: 20px; background-color: #222; overflow: hidden; }
.article-gallery.temp { height: 96px; }

.article-gallery .ico { position: absolute; font-family: siteicons; 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; }
.article-gallery .ico:hover { background-color: rgba(0,0,0,.8); }
.article-gallery .ico-delete,
.article-gallery .ico-edit { display: none; }
.article-gallery .ico.arrow-left { top: calc(50% - 20px); left: 20px; }
.article-gallery .ico.arrow-right { top: calc(50% - 20px); right: 20px; }
.article-gallery .ico.arrow-left:before { content: '\0044'; }
.article-gallery .ico.arrow-right:before { content: '\0045'; }
.article-gallery .count { position: absolute; bottom: 30px; left: 35px; font-size: 13px; color: white; font-weight: bold; font-family: Arial; z-index: 2; }

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

@media screen and (max-width: 580px) {
.article-gallery {margin-left: -20px; border-radius: 0; width: calc(100% + 40px); height: 264px;}
.article-gallery .item-wrap picture { height: 264px; }
.article-gallery .ico { width: 14px; height: 14px; font-size: 12px; }
}