.mgd-bez-przewijania {
overflow: hidden;
}
.mgd-podglad {
position: fixed;
inset: 0;
width: 100%;
max-width: none; height: 100vh;
height: 100dvh;
max-height: none;
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
background: #110e0c;
color: #fff;
user-select: none;
} .mgd-podglad[open] {
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
}
.mgd-podglad::backdrop {
background: #110e0c;
}
.mgd-podglad__gora {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem clamp(0.75rem, 2vw, 1.5rem);
}
.mgd-podglad__licznik {
margin: 0;
font-size: var(--wp--preset--font-size--xs);
font-variant-numeric: tabular-nums;
letter-spacing: 0.14em;
color: rgba(255, 255, 255, 0.75);
}
.mgd-podglad__zamknij,
.mgd-podglad__strzalka {
display: grid;
place-items: center;
width: 3rem;
height: 3rem;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
background: rgba(17, 14, 12, 0.55);
color: #fff;
cursor: pointer;
transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.mgd-podglad__zamknij svg,
.mgd-podglad__strzalka svg {
width: 1.2rem;
height: 1.2rem;
}
.mgd-podglad__scena {
position: relative;
display: grid;
grid-template: minmax(0, 1fr) / minmax(0, 1fr);
place-items: center;
min-height: 0;
padding-inline: clamp(0.5rem, 6vw, 6rem); touch-action: pan-y;
} .mgd-podglad__obraz {
width: 100%;
height: 100%;
object-fit: contain;
transition: opacity 0.25s ease;
}
.mgd-podglad__obraz.is-ladowanie {
opacity: 0.35;
}
.mgd-podglad__strzalka {
position: absolute;
top: 50%;
right: clamp(0.5rem, 1.5vw, 1.5rem);
z-index: 2;
transform: translateY(-50%);
}
.mgd-podglad__strzalka--wstecz {
right: auto;
left: clamp(0.5rem, 1.5vw, 1.5rem);
}
.mgd-podglad__strzalka--wstecz svg {
transform: rotate(180deg);
}
.mgd-podglad__miniatury {
position: relative;
display: flex;
gap: 0.4rem; padding: 0.85rem clamp(0.75rem, 2vw, 1.5rem) calc(1rem + env(safe-area-inset-bottom, 0px));
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
} .mgd-podglad__miniatury::before,
.mgd-podglad__miniatury::after {
content: "";
margin: auto;
}
.mgd-podglad__miniatura {
flex: none;
height: 4.25rem;
aspect-ratio: var(--prop);
padding: 0;
border: 0;
border-radius: 0.3rem;
overflow: hidden;
background: #2a2420;
opacity: 0.45;
cursor: pointer;
transition: opacity 0.25s ease;
}
.mgd-podglad__miniatura img {
width: 100%;
height: 100%;
object-fit: cover;
}
.mgd-podglad__miniatura[aria-current="true"] {
outline: 2px solid var(--wp--preset--color--accent-light);
outline-offset: -2px;
opacity: 1;
}
.mgd-podglad__zamknij:focus-visible,
.mgd-podglad__strzalka:focus-visible,
.mgd-podglad__miniatura:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
@media (hover: hover) {
.mgd-podglad__zamknij:hover,
.mgd-podglad__strzalka:hover {
border-color: var(--wp--preset--color--accent-light);
background: var(--wp--preset--color--accent-light);
color: #fff;
}
.mgd-podglad__miniatura:hover {
opacity: 0.85;
}
} @media (max-width: 47.9375rem) { .mgd-podglad__scena {
padding-inline: 0;
}
.mgd-podglad__strzalka {
width: 2.6rem;
height: 2.6rem;
}
.mgd-podglad__miniatura {
height: 3.5rem;
}
.mgd-podglad__miniatury {
padding-bottom: calc(1.75rem + env(safe-area-inset-bottom, 0px));
}
}