* {padding: 0; margin: 0; box-sizing: border-box}
html, body {width: 100%}
body {background: #efefef; color: #666666; font-size: 13px; font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 1.4}
.container {width: 100%;
    margin: 0 auto;
    max-width: 1600px;}
.gallery {display: grid; gap: 25px; grid-template-columns: repeat(4,minmax(0,1fr))}
.gallery .item {color: inherit; text-decoration: none}

.gallery .item .img svg {width: 40px; height: 40px; border: 3px solid #fff; border-radius: 50%; position: absolute; z-index: 1; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); padding: 10px; background: #b56063db; color: #fff}

.gallery .item .img {position: relative; margin-bottom: 5px}
.gallery .item .img img {aspect-ratio: 16/9; border: 5px solid #fff; display: block; max-width: 100%; max-height: 100%; height: auto; width: 100%}
.gallery .item .title {padding: 0 5px; height: 2.8em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis}
.gallery .item:hover .title {color: #000}
.gallery .item:hover .img svg {background: #323232}
.gallery .item .play {position: absolute; width: 40px; height: 40px}
.gallery .item .views {display: flex; align-items: center; gap: 5px; opacity: 0.5}
.gallery .item .views svg {width: 15px; height: 15px}

.pagination {display: flex; justify-content: center; margin: 30px 0; gap: 10px}
.load-more {background: #b56063db; color: white; border: none; padding: 12px 24px; border-radius: 4px; cursor: pointer; font-size: 14px; transition: background 0.3s}
.load-more:hover {background: #323232}
.load-more:disabled {background: #cccccc; cursor: not-allowed}
.loading {display: none; text-align: center; padding: 20px; color: #666}
.page-info {text-align: center; margin: 10px 0; color: #888; font-size: 12px}

@media screen and (max-width: 1023px) {
	.gallery {grid-template-columns: repeat(3,minmax(0,1fr))}
}
@media screen and (max-width: 767px) {
	.gallery {grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px}
}
@media screen and (max-width: 399px) {
	.gallery {grid-template-columns: 100%; gap: 20px}
}