.drg-gallery { display: grid; grid-template-columns: repeat(var(--drg-columns, 4), minmax(0, 1fr)); gap: 18px; width: 100%; }
.drg-gallery-item { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 14px; background: #edf5fb; box-shadow: 0 8px 24px rgba(6,37,81,.10); }
.drg-gallery-image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease, filter .35s ease; }
.drg-gallery-item:hover .drg-gallery-image, .drg-gallery-item:focus-visible .drg-gallery-image { transform: scale(1.045); filter: brightness(.88); }
.drg-gallery-item:focus-visible { outline: 3px solid #0861c0; outline-offset: 3px; }
.drg-zoom-icon { position: absolute; right: 14px; bottom: 14px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #0861c0; font: 300 29px/1 Arial,sans-serif; box-shadow: 0 5px 15px rgba(6,37,81,.25); opacity: 0; transform: translateY(7px); transition: opacity .25s ease, transform .25s ease; }
.drg-gallery-item:hover .drg-zoom-icon, .drg-gallery-item:focus-visible .drg-zoom-icon { opacity: 1; transform: translateY(0); }
.drg-lightbox { position: fixed; inset: 0; z-index: 999999; display: grid; place-items: center; padding: 54px 80px; background: rgba(2,16,35,.94); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; }
.drg-lightbox.is-open { opacity: 1; visibility: visible; }
.drg-lightbox-image { display: block; max-width: min(1200px, 100%); max-height: calc(100vh - 108px); object-fit: contain; border-radius: 8px; box-shadow: 0 18px 60px rgba(0,0,0,.45); }
.drg-lightbox button { position: absolute; border: 0; color: #fff; background: rgba(8,97,192,.92); cursor: pointer; transition: background .2s ease, transform .2s ease; }
.drg-lightbox button:hover, .drg-lightbox button:focus-visible { background: #2d8ae8; transform: scale(1.06); outline: 2px solid #fff; outline-offset: 2px; }
.drg-lightbox-close { top: 18px; right: 20px; width: 46px; height: 46px; border-radius: 50%; font: 300 32px/1 Arial,sans-serif; }
.drg-lightbox-prev, .drg-lightbox-next { top: 50%; width: 50px; height: 58px; border-radius: 10px; font: 300 35px/1 Arial,sans-serif; transform: translateY(-50%); }
.drg-lightbox-prev:hover, .drg-lightbox-prev:focus-visible, .drg-lightbox-next:hover, .drg-lightbox-next:focus-visible { transform: translateY(-50%) scale(1.06); }
.drg-lightbox-prev { left: 18px; }
.drg-lightbox-next { right: 18px; }
.drg-lightbox-counter { position: absolute; left: 50%; bottom: 17px; transform: translateX(-50%); color: #fff; font: 600 14px/1.4 Inter,Arial,sans-serif; }
body.drg-lightbox-open { overflow: hidden; }
@media (max-width: 900px) { .drg-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) { .drg-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .drg-lightbox { padding: 60px 16px; } .drg-lightbox-prev, .drg-lightbox-next { top: auto; bottom: 14px; } .drg-lightbox-prev { left: 16px; } .drg-lightbox-next { right: 16px; } .drg-lightbox-counter { bottom: 32px; } }
@media (max-width: 420px) { .drg-gallery { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .drg-gallery-image, .drg-zoom-icon, .drg-lightbox { transition: none; } }