.hue-mgrid { display: grid; gap: 3px; width: 100%; max-width: 510px; margin-top: 6px; box-sizing: border-box; }
.theme-modern .vk-post-body .hue-mgrid { max-width: 100%; }
.hue-mg-t { position: relative; overflow: hidden; min-width: 0; aspect-ratio: 1 / 1; background: #E4E6EA; }
.hue-mgrid .hue-mg-t img, .hue-mgrid .hue-mg-t video {
    position: absolute !important; left: 0; top: 0; width: 100% !important; height: 100% !important; object-fit: cover !important; display: block;
    margin: 0; border: 0; border-radius: 0 !important; max-width: none !important; max-height: none; cursor: zoom-in; }
.hue-mgrid-2, .hue-mgrid-4 { grid-template-columns: 1fr 1fr; }
.hue-mgrid-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 3 / 2; }
.hue-mgrid-3 .hue-mg-t { aspect-ratio: auto; }
.hue-mgrid-3 .hue-mg-big { grid-row: span 2; }
.hue-mgrid-5 { grid-template-columns: repeat(6, 1fr); }
.hue-mgrid-5 .hue-mg-w { grid-column: span 3; aspect-ratio: 3 / 2; }
.hue-mgrid-5 .hue-mg-n { grid-column: span 2; aspect-ratio: 1 / 1; }
.hue-mg-play { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px;
    background: rgba(0, 0, 0, 0.55); pointer-events: none; }
.hue-mg-play::after { content: ''; position: absolute; left: 17px; top: 13px; border-style: solid;
    border-width: 9px 0 9px 14px; border-color: transparent transparent transparent #FFFFFF; }
.vk-cmt-main .hue-mgrid { max-width: 340px; }

.hue-att { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; margin: 6px 0 2px; box-sizing: border-box; }
.hue-att:empty { display: none; }
.hue-att-it, .hue-att-add { position: relative; width: 64px; height: 64px; flex: 0 0 64px; overflow: hidden; box-sizing: border-box; }
.hue-att-it { background: #E4E6EA; border: 1px solid #D3D9DE; }
.hue-att-it img, .hue-att-it video { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; border: 0; border-radius: 0 !important; max-width: none !important; }
.hue-att-it.is-vid::after { content: 'видео'; position: absolute; left: 0; bottom: 0; padding: 1px 4px; background: rgba(0, 0, 0, 0.6); color: #FFFFFF; font-size: 10px; }
.hue-att-x { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; line-height: 17px; text-align: center;
    background: rgba(0, 0, 0, 0.65); color: #FFFFFF !important; font-size: 15px; text-decoration: none !important; cursor: pointer; }
.hue-att-x:hover { background: #B01E1E; }
.hue-att-add { display: flex; align-items: center; justify-content: center; border: 1px dashed #9AA4AE; color: #818C99 !important;
    font-size: 28px; line-height: 1; text-decoration: none !important; cursor: pointer; background: transparent; }
.hue-att-add:hover { border-color: #5E6670; color: #3A3A3A !important; }
.hue-att-n { font-size: 11px; color: #818C99; white-space: nowrap; }
.hue-att-err { flex-basis: 100%; font-size: 11px; color: #C62828; }
.theme-modern .vk-write-cmt .hue-att { padding-left: 40px; }
.theme-modern .vk-reply-box .hue-att { padding-left: 0; }

.hue-medit { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; width: 100%; }
.hue-medit-it, .hue-medit-add { position: relative; width: 64px; height: 64px; overflow: hidden; cursor: pointer; box-sizing: border-box; margin: 0; }
.hue-medit-it { border: 1px solid #D3D9DE; background: #E4E6EA; }
.hue-medit-it img, .hue-medit-it video { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; border-radius: 0 !important; max-width: none !important; }
.hue-medit-it input, .hue-medit-add input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.hue-medit-x { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; line-height: 17px; text-align: center;
    background: rgba(0, 0, 0, 0.65); color: #FFFFFF; font-size: 15px; }
.hue-medit-it.is-off img, .hue-medit-it.is-off video, .hue-medit-it:has(input:not(:checked)) img { opacity: 0.25; }
.hue-medit-it.is-off .hue-medit-x { background: #2F9A52; }
.hue-medit-it.is-off .hue-medit-x::before { content: '\21BA'; position: absolute; inset: 0; background: #2F9A52; }
.hue-medit-add { display: flex; align-items: center; justify-content: center; border: 1px dashed #9AA4AE; color: #818C99; font-size: 28px; }
.hue-medit .hue-att { display: contents; }
.hue-medit .hue-att-n { align-self: center; order: 99; }
.hue-medit .hue-att-err { order: 100; }

.hue-mv-nav { position: absolute; top: 50%; width: 56px; height: 96px; margin-top: -48px; display: flex; align-items: center; justify-content: center;
    color: #FFFFFF !important; font-size: 44px; line-height: 1; text-decoration: none !important; background: rgba(0, 0, 0, 0.25);
    cursor: pointer; user-select: none; z-index: 3; }
.hue-mv-nav:hover { background: rgba(0, 0, 0, 0.5); }
.hue-mv-prev { left: 0; }
.hue-mv-next { right: 0; }
.hue-mv-count { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); padding: 3px 10px; background: rgba(0, 0, 0, 0.55);
    color: #FFFFFF; font-size: 13px; z-index: 3; pointer-events: none; }
#vk-photo-view .pv-img { position: relative; }

@media (max-width: 700px) {
    .hue-mv-nav { width: 40px; height: 72px; margin-top: -36px; font-size: 34px; background: rgba(0, 0, 0, 0.2); }
    .hue-att-it, .hue-att-add, .hue-medit-it, .hue-medit-add { width: 58px; height: 58px; flex-basis: 58px; }
}

.hue-video-preview, .hue-vatt { position: relative; display: inline-block; max-width: 100%; vertical-align: top; line-height: 0; }
.hue-vatt { display: block; cursor: pointer; }
.hue-video-preview video, .hue-vatt video { display: block; max-width: 100%; }
.hue-video-time { position: absolute; right: 6px; bottom: 6px; padding: 0 6px; background: rgba(0, 0, 0, 0.6); color: #FFFFFF;
    font: bold 11px/18px Arial, Helvetica, sans-serif; pointer-events: none; letter-spacing: .3px; }
.hue-video-time:empty { display: none; }
.hue-vatt.is-playing { cursor: default; }
.hue-vatt.is-playing .hue-mg-play, .hue-vatt.is-playing .hue-video-time { display: none; }