.immomakler-gallery--horizontal_thumbs { --immomakler-gallery-gap: 6px;
--immomakler-gallery-main-aspect: 4 / 3;
--immomakler-gallery-thumb-aspect: 4 / 3; --immomakler-gallery-primary-color: #af1615;
--immomakler-gallery-primary-color-inverted: #fff; --immomakler-gallery-nav-opacity: 0.8;
--immomakler-gallery-thumb-default-opacity: 0.6;
--immomakler-gallery-thumb-nav-opacity: 0.5;
--immomakler-gallery-thumb-nav-opacity-hover: 0.9; --immomakler-gallery-nav-button-size: 30px; --immomakler-gallery-nav-clickarea-width: 45px;
--immomakler-gallery-thumb-nav-width: 20px; --immomakler-gallery-horizontal-thumb-height: 110px; --swiper-navigation-sides-offset: 12px;
display: flex;
flex-direction: column;
gap: var(--immomakler-gallery-gap); width: 100%;
max-width: 100%;
} .immomakler-gallery--horizontal_thumbs .immomakler-gallery__main {
position: relative;
width: 100%;
min-width: 0;
aspect-ratio: var(--immomakler-gallery-main-aspect);
overflow: hidden;
user-select: none; border-radius: var(--immomakler-gallery-border-radius, 0);
}
.immomakler-gallery--horizontal_thumbs .immomakler-gallery__main .swiper-slide {
display: flex;
align-items: center;
justify-content: center;
cursor: zoom-in; width: 100%;
}
.immomakler-gallery--horizontal_thumbs .immomakler-gallery__main .swiper-slide img.immomakler-gallery__image,
.immomakler-gallery--horizontal_thumbs .immomakler-gallery__main .swiper-slide picture > img.immomakler-gallery__image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
} .immomakler-gallery--horizontal_thumbs .immomakler-gallery__prev,
.immomakler-gallery--horizontal_thumbs .immomakler-gallery__next {
width: var(--immomakler-gallery-nav-clickarea-width);
height: 100%;
top: 0;
margin-top: 0; background: transparent;
border-radius: 0; display: flex;
align-items: center;
justify-content: center;
color: var(--immomakler-gallery-primary-color-inverted);
visibility: hidden;
} .immomakler-gallery--horizontal_thumbs .immomakler-gallery__prev {
left: 0;
right: auto;
}
.immomakler-gallery--horizontal_thumbs .immomakler-gallery__next {
right: 0;
left: auto;
} .immomakler-gallery--horizontal_thumbs .immomakler-gallery__prev::before,
.immomakler-gallery--horizontal_thumbs .immomakler-gallery__next::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: var(--immomakler-gallery-nav-button-size);
height: var(--immomakler-gallery-nav-button-size);
background-color: var(--immomakler-gallery-primary-color);
border-radius: 50%;
opacity: var(--immomakler-gallery-nav-opacity);
transition: opacity 200ms ease, background-color 200ms ease;
} .immomakler-gallery--horizontal_thumbs .swiper-navigation-icon {
height: calc(var(--immomakler-gallery-nav-button-size) / 2);
width: auto; position: relative;
z-index: 1;
}
.immomakler-gallery--horizontal_thumbs .immomakler-gallery__prev.swiper-button-disabled,
.immomakler-gallery--horizontal_thumbs .immomakler-gallery__next.swiper-button-disabled {
pointer-events: auto;
}
.immomakler-gallery--horizontal_thumbs .immomakler-gallery__prev.swiper-button-disabled::before,
.immomakler-gallery--horizontal_thumbs .immomakler-gallery__next.swiper-button-disabled::before {
background-color: #666;
} .immomakler-gallery--horizontal_thumbs:hover .immomakler-gallery__prev,
.immomakler-gallery--horizontal_thumbs:hover .immomakler-gallery__next,
.immomakler-gallery--horizontal_thumbs:has(:focus-visible) .immomakler-gallery__prev,
.immomakler-gallery--horizontal_thumbs:has(:focus-visible) .immomakler-gallery__next {
visibility: visible;
} .immomakler-gallery--horizontal_thumbs .immomakler-gallery__thumbs { position: relative;
width: 100%;
min-width: 0;
} .immomakler-gallery--horizontal_thumbs .immomakler-gallery__thumbs .swiper-slide {
height: var(--immomakler-gallery-horizontal-thumb-height);
width: auto;
aspect-ratio: var(--immomakler-gallery-thumb-aspect); min-width: 0 !important;
flex-shrink: 0;
cursor: pointer;
opacity: var(--immomakler-gallery-thumb-default-opacity);
transition: opacity 150ms ease; overflow: hidden;
border-radius: var(--immomakler-gallery-border-radius, 0);
}
.immomakler-gallery--horizontal_thumbs .immomakler-gallery__thumbs .swiper-slide:hover,
.immomakler-gallery--horizontal_thumbs .immomakler-gallery__thumbs .swiper-slide-thumb-active {
opacity: 1;
}
.immomakler-gallery--horizontal_thumbs .immomakler-gallery__thumbs .immomakler-gallery__image {
width: 100%;
height: 100%;
object-fit: cover;
} .immomakler-gallery--horizontal_thumbs .immomakler-gallery__thumbs-prev,
.immomakler-gallery--horizontal_thumbs .immomakler-gallery__thumbs-next {
position: absolute;
top: 0;
height: 100%;
width: var(--immomakler-gallery-thumb-nav-width);
z-index: 2;
color: var(--immomakler-gallery-primary-color-inverted);
background-color: var(--immomakler-gallery-primary-color);
opacity: var(--immomakler-gallery-thumb-nav-opacity);
border: 0;
margin: 0;
padding: 0;
cursor: pointer;
text-align: center;
transition: opacity 500ms ease;
visibility: hidden;
}
.immomakler-gallery--horizontal_thumbs .immomakler-gallery__thumbs-prev::after,
.immomakler-gallery--horizontal_thumbs .immomakler-gallery__thumbs-next::after {
display: block;
color: inherit;
font-size: calc(var(--immomakler-gallery-thumb-nav-width) * 0.6);
line-height: 1;
}
.immomakler-gallery--horizontal_thumbs .immomakler-gallery__thumbs-prev::after {
content: "◀";
}
.immomakler-gallery--horizontal_thumbs .immomakler-gallery__thumbs-next::after {
content: "▶";
}
.immomakler-gallery--horizontal_thumbs .immomakler-gallery__thumbs-prev {
left: 0;
}
.immomakler-gallery--horizontal_thumbs .immomakler-gallery__thumbs-next {
right: 0;
}
.immomakler-gallery--horizontal_thumbs .immomakler-gallery__thumbs-prev:hover,
.immomakler-gallery--horizontal_thumbs .immomakler-gallery__thumbs-next:hover {
opacity: var(--immomakler-gallery-thumb-nav-opacity-hover);
} .immomakler-gallery--horizontal_thumbs .immomakler-gallery__thumbs-prev.swiper-button-disabled,
.immomakler-gallery--horizontal_thumbs .immomakler-gallery__thumbs-next.swiper-button-disabled {
cursor: default;
animation: immomakler-gallery-thumb-nav-fade 1.5s forwards;
}
@keyframes immomakler-gallery-thumb-nav-fade {
0% {
background-color: var(--immomakler-gallery-primary-color);
opacity: var(--immomakler-gallery-thumb-nav-opacity);
pointer-events: auto;
}
30% {
background-color: #666;
opacity: 0.4;
pointer-events: auto;
}
100% {
background-color: #666;
opacity: 0;
pointer-events: none;
}
} .immomakler-gallery--horizontal_thumbs:hover .immomakler-gallery__thumbs-prev,
.immomakler-gallery--horizontal_thumbs:hover .immomakler-gallery__thumbs-next,
.immomakler-gallery--horizontal_thumbs:has(:focus-visible) .immomakler-gallery__thumbs-prev,
.immomakler-gallery--horizontal_thumbs:has(:focus-visible) .immomakler-gallery__thumbs-next {
visibility: visible;
}  .immomakler-gallery--carousel {
--immomakler-gallery-carousel-height: 400px;
}
.immomakler-gallery--horizontal_thumbs.immomakler-gallery--carousel .immomakler-gallery__main { aspect-ratio: auto;
height: var(--immomakler-gallery-carousel-height);
} .immomakler-gallery--horizontal_thumbs.immomakler-gallery--carousel .immomakler-gallery__main .swiper-slide {
width: auto;
height: 100%;
aspect-ratio: var(--immomakler-gallery-main-aspect);
opacity: 0.5;
transition: opacity 300ms ease;
}
.immomakler-gallery--horizontal_thumbs.immomakler-gallery--carousel .immomakler-gallery__main .swiper-slide-active {
opacity: 1;
} .immomakler-gallery--horizontal_thumbs.immomakler-gallery--carousel .immomakler-gallery__main .swiper-slide img.immomakler-gallery__image,
.immomakler-gallery--horizontal_thumbs.immomakler-gallery--carousel .immomakler-gallery__main .swiper-slide picture > img.immomakler-gallery__image {
width: 100%;
height: 100%;
object-fit: cover;
} @media (max-width: 768px) {
.immomakler-gallery--horizontal_thumbs .immomakler-gallery__thumbs {
display: none;
} .immomakler-gallery--horizontal_thumbs.immomakler-gallery--show-mobile-thumbs .immomakler-gallery__thumbs {
display: block;
}
} .immomakler-gallery--horizontal_thumbs .immomakler-gallery__pagination {
display: none;
position: absolute;
bottom: 8px;
left: 0;
right: 0;
width: 100%;
text-align: center;
z-index: 1;
}
.immomakler-gallery--horizontal_thumbs.immomakler-gallery--no-thumbs .immomakler-gallery__pagination {
display: block;
}
@media (max-width: 768px) {
.immomakler-gallery--horizontal_thumbs:not(.immomakler-gallery--show-mobile-thumbs) .immomakler-gallery__pagination {
display: block;
}
}
.immomakler-gallery--horizontal_thumbs .immomakler-gallery__pagination .swiper-pagination-bullet {
width: 8px;
height: 8px;
background: #fff;
opacity: 0.6;
margin: 0 4px;
border-radius: 50%;
display: inline-block;
transition: opacity 150ms ease, background-color 150ms ease;
cursor: pointer; box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}
.immomakler-gallery--horizontal_thumbs .immomakler-gallery__pagination .swiper-pagination-bullet-active {
background: var(--immomakler-gallery-primary-color);
opacity: 1;
} .immomakler-gallery--horizontal_thumbs.immomakler-gallery--rounded-wrapper {
border-radius: var(--immomakler-gallery-border-radius, 0);
overflow: hidden;
}
.immomakler-gallery--horizontal_thumbs.immomakler-gallery--rounded-wrapper .immomakler-gallery__main,
.immomakler-gallery--horizontal_thumbs.immomakler-gallery--rounded-wrapper .immomakler-gallery__thumbs .swiper-slide {
border-radius: 0;
}