.gallery-grid{grid-template-columns:repeat(5,1fr);grid-auto-rows:80px;grid-auto-flow:dense;gap:.25rem;display:grid}.gallery-item{cursor:pointer;background-color:#404040;border-radius:.25rem;position:relative;overflow:hidden}.gallery-media{position:absolute;inset:0}.gallery-image{object-fit:cover}.gallery-item{grid-area:span 3/span 1}.role-3,.role-10,.role-13{grid-area:span 6/span 1}.role-4,.role-7,.role-14{grid-area:span 6/span 2}.gallery-item:after{content:"";opacity:0;background:linear-gradient(#0000 60%,#272020);transition:opacity .4s ease-in-out;position:absolute;inset:0}.gallery-item:hover:after{opacity:1}.gallery-item .gallery-image{transition:transform .4s ease-in-out}.gallery-item:hover .gallery-image{transform:scale(1.1)}.gallery-container .modal-overlay{z-index:999;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.gallery-container .modal-overlay .modal-container{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#0000;width:100%;height:100vh;padding:1rem;position:relative}.gallery-container .modal-overlay .modal-container .modal-close-btn{z-index:50;cursor:pointer;color:#fff;background-color:#fff0;border:1px solid #fff0;padding:1.5rem;transition:all .3s;position:absolute;top:.5rem;right:.5rem}.gallery-container .modal-overlay .modal-container .modal-close-btn span{color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(10px);background-color:#2e2e2e40;border:0;border-radius:9999px;justify-content:center;align-items:center;width:50px;height:50px;margin:0;padding:1rem;font-size:1.25rem;line-height:1;transition:all .3s;display:flex}.gallery-container .modal-overlay .modal-container .modal-close-btn:hover span{background-color:#91919180}.gallery-container .modal-overlay .modal-container .modal-image{object-fit:contain;border-radius:.75rem;width:100%;height:auto;box-shadow:0 10px 15px #0000004d}.gallery-container .modal-overlay .modal-container .modal-arrow{color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(.1rem);backdrop-filter:blur(.1rem);background-color:#2e2e2e40;border:1px solid #fff3;border-radius:.75rem;padding:2rem 1.5rem;font-size:2rem;line-height:2rem;transition:all .3s;position:absolute;top:50%;transform:translateY(-50%)}.gallery-container .modal-overlay .modal-container .modal-arrowLeft{left:.5rem}.gallery-container .modal-overlay .modal-container .modal-arrowRight{right:.5rem}.gallery-container .modal-overlay .modal-container .image-counter{z-index:50;color:#fff;-webkit-backdrop-filter:blur(.1rem);backdrop-filter:blur(.1rem);background-color:#2e2e2e40;border:1px solid #fff3;border-radius:.75rem;padding:.5rem 1.5rem;transition:all .3s;position:absolute;bottom:1rem;left:50%;transform:translate(-50%)}.gallery-container .modal-overlay .modal-container .image-counter span{white-space:nowrap;letter-spacing:0;font-family:Courier New,Courier,monospace}@media (max-width:1024px){.gallery-grid{grid-template-columns:repeat(4,1fr)}.gallery-item,.role-1,.role-2,.role-5,.role-6,.role-8,.role-9,.role-11,.role-12,.role-15,.role-16,.role-17,.role-18{grid-area:span 2/span 1}.role-3,.role-4,.role-7,.role-10,.role-13,.role-14{grid-area:span 4/span 1}}@media (max-width:768px){.gallery-grid{grid-template-columns:repeat(3,1fr)}.gallery-item,.role-1,.role-3,.role-6,.role-7,.role-9,.role-11,.role-13,.role-15,.role-17{grid-area:span 2/span 1}.role-2,.role-4,.role-5,.role-8,.role-10,.role-12,.role-14,.role-16,.role-18{grid-area:span 4/span 1}}@media (max-width:440px){.gallery-grid{grid-template-columns:repeat(6,1fr)}.gallery-item{border-radius:.1rem}.gallery-item,.role-1,.role-3,.role-6,.role-7,.role-9,.role-12,.role-13,.role-15,.role-18{grid-area:span 2/span 2}.role-2,.role-4,.role-5,.role-8,.role-10,.role-11,.role-14,.role-16,.role-17{grid-area:span 3/span 2}}@media (max-width:320px){.gallery-grid{grid-template-columns:repeat(4,1fr)}.gallery-item{grid-area:span 3/span 2}.role-1,.role-6,.role-7,.role-12,.role-13,.role-18{grid-area:span 2/span 2}}
