.qgallery {display:grid;grid-template-columns:var(--qg-rail,19.5%) minmax(0,1fr);gap:var(--qg-gap,10px);align-items:start;width:100%}
.qgallery-rail {display:grid;gap:var(--qg-gap,10px);min-width:0}
.qgallery button {appearance:none;cursor:pointer;margin:0;padding:0;border:0;box-shadow:none}
.qgallery .qgallery-thumb {display:block;overflow:hidden;aspect-ratio:1;width:100%;border-radius:var(--qg-radius,12px);background:white}
.qgallery .qgallery-thumb[hidden] {display:none}
.qgallery .qgallery-thumb img {display:block;width:100%;height:100%;object-fit:cover}
.qgallery-thumb[aria-pressed=true] img {opacity:.55}
.qgallery .qgallery-stage {position:relative;overflow:hidden;border-radius:var(--qg-radius,12px)}
.qgallery .qgallery-stage img,.qgallery-placeholder {display:block;width:100%;height:auto}
.qgallery-stage img {transform-origin:var(--qg-origin,center);transition:transform .24s ease}
.qgallery-scroll {display:flex;gap:5px}
.qgallery [data-gallery-action] {display:grid;place-items:center;color:var(--qg-arrow,#333);background:var(--qg-button,#f8f8f8);border-radius:8px}
.qgallery-scroll button {width:50%;height:32px}
.qgallery button:disabled {opacity:.5;cursor:default}
.qgallery button svg {width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.qgallery [data-gallery-action=up] svg {transform:rotate(-90deg)}
.qgallery [data-gallery-action=down] svg {transform:rotate(90deg)}
.qgallery [data-gallery-action=prev] svg {transform:rotate(180deg)}
.qgallery-stage button {position:absolute;top:50%;transform:translateY(-50%);width:36px;height:42px}
.qgallery [data-gallery-action=prev] {left:8px}
.qgallery [data-gallery-action=next] {right:8px}
@media (hover:hover) and (pointer:fine) {
    .qgallery-stage:hover img {transform:scale(var(--qg-zoom,2))}
    .qgallery-stage button {opacity:0;pointer-events:none;transition:opacity .18s}
    .qgallery-stage:is(:hover,:focus-within) button {opacity:1;pointer-events:auto}
}
@media (prefers-reduced-motion:reduce) {
    .qgallery-stage img,.qgallery-stage button {transition:none}
}
@media (min-width:768px) {
    .qgallery .qgallery-thumb img {object-position:center;transform:scale(1.10)}
    .qgallery-scroll {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
    .qgallery .qgallery-scroll button {width:100%;height:32px;background:var(--qg-button,#fff);border-radius:8px;box-shadow:0 0 0 1px rgb(0 0 0 / 4%)}
    .qgallery .qgallery-scroll button:disabled {opacity:1}
    .qgallery-scroll button:disabled svg {opacity:.4}
    .qgallery-thumb:nth-child(4) + .qgallery-scroll {display:none}
}
@media (max-width:767px) {
    .qgallery {grid-template-columns:minmax(0,1fr)}
    .qgallery-stage {grid-row:1}
    .qgallery-rail {position:relative;grid-template-columns:repeat(3,minmax(0,1fr))}
    .qgallery .qgallery-thumb {aspect-ratio:3/4}
    .qgallery-stage:hover img {transform:none}
    .qgallery-scroll {display:contents}
    .qgallery [data-gallery-action] {position:absolute;top:50%;transform:translateY(-50%);width:36px;height:44px;background:transparent;opacity:1;pointer-events:auto}
    .qgallery [data-gallery-action]:disabled {opacity:.35}
    .qgallery [data-gallery-action=up] {left:2px}
    .qgallery [data-gallery-action=down] {right:2px}
    .qgallery [data-gallery-action=up] svg {transform:rotate(180deg)}
    .qgallery [data-gallery-action=down] svg {transform:none}
}
.qgallery-window {container-type:inline-size;overflow:clip;grid-column:1/-1;min-width:0}
.qgallery-track {display:grid;gap:var(--qg-gap,10px);transition:transform .34s ease-in-out}
.qgallery-window::before {content:"";display:block;height:calc(var(--visible) * 100cqw + (var(--visible) - 1) * var(--qg-gap,10px))}
.qgallery-window {position:relative}
.qgallery-track {position:absolute;inset:0 0 auto}
@media(min-width:768px){
    .qgallery-rail:has(.qgallery-track > :nth-child(4):last-child) .qgallery-scroll {display:none}
}
@media(max-width:767px){
    .qgallery-track {grid-auto-flow:column;grid-auto-columns:calc((100% - 2 * var(--qg-gap,10px)) / 3)}
    .qgallery-window::before {height:calc((100cqw - 2 * var(--qg-gap,10px)) * 4 / 9)}
}
@media(prefers-reduced-motion:reduce){.qgallery-track {transition:none}}