.dplus-filter-gallery {
--dplus-gallery-columns: 4;
--dplus-gallery-gap: clamp(16px, calc(12.870px + 0.870vw), 24px);
width: 100%;
}
.dplus-filter-gallery__filters {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0 0 22px;
}
.dplus-filter-gallery__filter {
background: #ffffff;
border: 1px solid #d6dbe1;
border-radius: 6px;
color: #1f2933;
cursor: pointer;
font: inherit;
line-height: 1.2;
padding: 9px 14px;
transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.dplus-filter-gallery__filter:hover,
.dplus-filter-gallery__filter:focus-visible {
border-color: #1f2933;
outline: none;
}
.dplus-filter-gallery__filter.is-active {
background: #1f2933;
border-color: #1f2933;
color: #ffffff;
}
.dplus-filter-gallery__grid {
display: grid;
gap: var(--dplus-gallery-gap);
grid-template-columns: repeat(var(--dplus-gallery-columns), minmax(0, 1fr));
}
.dplus-filter-gallery__item {
margin: 0;
min-width: 0;
}
.dplus-filter-gallery__media {
aspect-ratio: 4 / 3;
background: #f4f6f8;
overflow: hidden;
position: relative;
}
.dplus-filter-gallery__item[hidden] {
display: none;
}
.dplus-filter-gallery__link {
display: block;
height: 100%;
position: relative;
width: 100%;
}
.dplus-filter-gallery__image {
display: block;
height: 100%;
object-fit: cover;
transition: transform 220ms ease;
width: 100%;
}
.dplus-filter-gallery__link:hover .dplus-filter-gallery__image,
.dplus-filter-gallery__link:focus-visible .dplus-filter-gallery__image {
transform: scale(1.03);
}
.dplus-filter-gallery__overlay {
background: rgba(0, 0, 0, 0.2);
inset: 0;
opacity: 0;
position: absolute;
transition: opacity 180ms ease;
z-index: 1;
}
.dplus-filter-gallery__overlay::before {
color: #ffffff;
content: "+";
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 58px;
font-weight: 300;
height: 58px;
line-height: 54px;
left: 50%;
position: absolute;
text-align: center;
top: 50%;
transform: translate(-50%, -50%);
width: 58px;
}
.dplus-filter-gallery__link:hover .dplus-filter-gallery__overlay,
.dplus-filter-gallery__link:focus-visible .dplus-filter-gallery__overlay {
opacity: 1;
}
.dplus-filter-gallery__empty {
margin: 0;
}
.dplus-filter-gallery__title {
color: #1f2933;
font-size: 15px;
font-weight: 600;
line-height: 1.35;
margin: 8px 0 0;
overflow-wrap: anywhere;
}
html.dplus-filter-gallery-lightbox-open {
overflow: hidden;
}
.dplus-filter-gallery-lightbox {
align-items: center;
background: rgba(0, 0, 0, 0.76);
display: flex;
inset: 0;
justify-content: center;
padding: 76px 13vw 74px;
position: fixed;
z-index: 99999;
}
.dplus-filter-gallery-lightbox[hidden] {
display: none;
}
.dplus-filter-gallery-lightbox__stage {
display: block;
max-width: min(1400px, 74vw);
position: relative;
}
.dplus-filter-gallery-lightbox__image {
box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
display: block;
max-height: calc(100vh - 160px);
max-width: 100%;
width: auto;
}
.dplus-filter-gallery-lightbox__close {
align-items: center;
background: transparent;
border: 0;
color: rgba(255, 255, 255, 0.72);
cursor: pointer;
display: flex;
font-family: Open Sans,Arial,sans-serif;
font-size: 62px;
font-weight: 500;
height: 62px;
justify-content: center;
line-height: 1;
position: absolute;
right: -2px;
top: -68px;
width: 62px;
z-index: 2;
}
.dplus-filter-gallery-lightbox__nav {
align-items: center;
background: transparent;
border: 0;
color: rgba(255, 255, 255, 0.68);
cursor: pointer;
display: flex;
font-family: ETmodules;
font-size: 82px;
font-weight: 700;
height: 92px;
justify-content: center;
line-height: 1;
position: fixed;
top: 50%;
transform: translateY(-50%);
width: 70px;
}
.dplus-filter-gallery-lightbox__nav:hover,
.dplus-filter-gallery-lightbox__nav:focus-visible,
.dplus-filter-gallery-lightbox__close:hover,
.dplus-filter-gallery-lightbox__close:focus-visible {
background: transparent;
color: #ffffff;
outline: none;
}
.dplus-filter-gallery-lightbox__nav--prev {
left: 0;
}
.dplus-filter-gallery-lightbox__nav--next {
right: 0;
}
.dplus-filter-gallery-lightbox__counter {
color: rgba(255, 255, 255, 0.82);
font-size: 14px;
font-weight: 600;
line-height: 1.3;
position: absolute;
right: 0;
top: calc(100% + 7px);
}
.dplus-filter-gallery-lightbox__title {
color: #ffffff;
font-size: 16px;
font-weight: 700;
left: 0;
line-height: 1.3;
max-width: calc(100% - 90px);
overflow-wrap: anywhere;
position: absolute;
top: calc(100% + 6px);
}
@media (max-width: 980px) {
.dplus-filter-gallery__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.dplus-filter-gallery__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 480px) {
.dplus-filter-gallery__filters {
gap: 8px;
}
.dplus-filter-gallery__filter {
padding: 8px 11px;
}
.dplus-filter-gallery__grid {
grid-template-columns: 1fr;
}
.dplus-filter-gallery-lightbox {
padding: 60px 48px 64px;
}
.dplus-filter-gallery-lightbox__stage {
max-width: calc(100vw - 96px);
}
.dplus-filter-gallery-lightbox__nav {
font-size: 58px;
height: 72px;
width: 44px;
}
.dplus-filter-gallery-lightbox__nav--prev {
left: 0;
}
.dplus-filter-gallery-lightbox__nav--next {
right: 0;
}
.dplus-filter-gallery-lightbox__title {
font-size: 14px;
max-width: calc(100% - 78px);
}
.dplus-filter-gallery-lightbox__counter {
font-size: 13px;
}
.dplus-filter-gallery-lightbox__close {
font-size: 46px;
height: 48px;
right: -4px;
top: -52px;
width: 48px;
}
}