.jforma-loghi-slot,
.jforma-loghi {
--jforma-loghi-height: 240px;
}
.jforma-loghi {
--jforma-loghi-space: 60px;
--jforma-loghi-per-row: 2;
--jforma-loghi-arrow: 48px; container-type: inline-size;
position: relative;
display: flex; margin-right: var(--jforma-loghi-inset-right, 0px);
margin-left: var(--jforma-loghi-inset-left, 0px);
overflow: hidden;
} .jforma-loghi-slot {
min-height: var(--jforma-loghi-height);
} @media (scripting: none) {
.jforma-loghi-slot {
display: none;
}
}
.jforma-loghi__track {
display: flex;
flex: none;
width: max-content;
margin: 0;
padding: 0;
list-style: none; will-change: transform; animation: jforma-loghi-scroll var(--jforma-loghi-duration, calc(var(--jforma-loghi-count) * 300s / var(--jforma-loghi-speed, 60))) linear infinite;
} .jforma-loghi:is(:hover, :focus-within) .jforma-loghi__track {
animation-play-state: paused;
} .jforma-loghi:focus-visible {
outline: 2px solid #555;
outline-offset: -2px;
} .jforma-loghi__item {
box-sizing: border-box;
display: flex;
flex: none;
align-items: center;
justify-content: center;
width: calc((100cqw + var(--jforma-loghi-space)) / var(--jforma-loghi-per-row));
height: var(--jforma-loghi-height);
margin: 0;
padding: 0 var(--jforma-loghi-space) 0 0;
list-style: none;
} .jforma-loghi__item img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
filter: grayscale(100%);
opacity: .9;
transition: filter .3s, opacity .3s;
}
.jforma-loghi__item img:hover {
filter: none;
opacity: 1;
} .jforma-loghi__prev,
.jforma-loghi__next {
position: absolute;
top: 50%;
display: none;
align-items: center;
justify-content: center;
width: var(--jforma-loghi-arrow);
height: var(--jforma-loghi-arrow);
margin: 0;
padding: 0;
cursor: pointer;
transform: translateY(-50%);
}
.jforma-loghi__prev svg,
.jforma-loghi__next svg {
width: 100%;
height: 100%;
}
.jforma-loghi__prev {
left: 0;
}
.jforma-loghi__next {
right: 0;
} .jforma-loghi .jforma-loghi__prev,
.jforma-loghi .jforma-loghi__next,
.jforma-loghi .jforma-loghi__prev:is(:hover, :focus, :active),
.jforma-loghi .jforma-loghi__next:is(:hover, :focus, :active) {
border: 0;
background: none;
box-shadow: none;
color: #555;
}
.jforma-loghi .jforma-loghi__prev:hover,
.jforma-loghi .jforma-loghi__next:hover {
color: #000;
} .jforma-loghi .jforma-loghi__prev[aria-disabled="true"],
.jforma-loghi .jforma-loghi__next[aria-disabled="true"] {
color: #555;
cursor: default;
} .jforma-loghi__prev[aria-disabled="true"] svg,
.jforma-loghi__next[aria-disabled="true"] svg {
opacity: .3;
} @media (forced-colors: active) {
.jforma-loghi__prev[aria-disabled="true"] svg,
.jforma-loghi__next[aria-disabled="true"] svg {
opacity: 1;
color: GrayText;
}
} .jforma-loghi .jforma-loghi__prev:focus-visible,
.jforma-loghi .jforma-loghi__next:focus-visible {
outline: 2px solid currentColor;
outline-offset: -2px;
} .jforma-loghi__track:focus-visible {
outline: none;
}
.jforma-loghi:has(> .jforma-loghi__track:focus-visible)::after {
position: absolute;
inset: 0 var(--jforma-loghi-arrow);
border: 2px solid #555;
content: "";
pointer-events: none;
}
@keyframes jforma-loghi-scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
} @media (prefers-reduced-motion: reduce) {
.jforma-loghi {
padding-inline: var(--jforma-loghi-arrow);
}
.jforma-loghi__track {
flex: auto;
width: auto;
min-width: 0;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
animation: none;
}
.jforma-loghi__track::-webkit-scrollbar {
display: none;
}
.jforma-loghi__item {
scroll-snap-align: start;
}
.jforma-loghi__item--clone {
display: none;
} .jforma-loghi__item:is(:has(+ .jforma-loghi__item--clone), :last-child) {
width: calc((100cqw + var(--jforma-loghi-space)) / var(--jforma-loghi-per-row) - var(--jforma-loghi-space));
padding-inline-end: 0;
}
.jforma-loghi__prev,
.jforma-loghi__next {
display: flex;
}
}
@media (width >= 736px) {
.jforma-loghi {
--jforma-loghi-per-row: 3;
}
}
@media (width >= 980px) {
.jforma-loghi {
--jforma-loghi-per-row: 4;
}
}
@media (width >= 1200px) {
.jforma-loghi {
--jforma-loghi-per-row: 5;
}
} @media (width < 736px) {
.jforma-loghi--fits-2 {
justify-content: center;
padding-inline: 0;
}
.jforma-loghi--fits-2 .jforma-loghi__track {
flex: none;
width: max-content;
overflow: visible;
animation: none;
}
.jforma-loghi--fits-2 .jforma-loghi__item:is(:has(+ .jforma-loghi__item--clone), :last-child) {
width: calc((100cqw + var(--jforma-loghi-space)) / var(--jforma-loghi-per-row) - var(--jforma-loghi-space));
padding-inline-end: 0;
}
.jforma-loghi--fits-2 .jforma-loghi__item--clone,
.jforma-loghi--fits-2 .jforma-loghi__prev,
.jforma-loghi--fits-2 .jforma-loghi__next {
display: none;
}
}
@media (736px <= width < 980px) {
.jforma-loghi--fits-3 {
justify-content: center;
padding-inline: 0;
}
.jforma-loghi--fits-3 .jforma-loghi__track {
flex: none;
width: max-content;
overflow: visible;
animation: none;
}
.jforma-loghi--fits-3 .jforma-loghi__item:is(:has(+ .jforma-loghi__item--clone), :last-child) {
width: calc((100cqw + var(--jforma-loghi-space)) / var(--jforma-loghi-per-row) - var(--jforma-loghi-space));
padding-inline-end: 0;
}
.jforma-loghi--fits-3 .jforma-loghi__item--clone,
.jforma-loghi--fits-3 .jforma-loghi__prev,
.jforma-loghi--fits-3 .jforma-loghi__next {
display: none;
}
}
@media (980px <= width < 1200px) {
.jforma-loghi--fits-4 {
justify-content: center;
padding-inline: 0;
}
.jforma-loghi--fits-4 .jforma-loghi__track {
flex: none;
width: max-content;
overflow: visible;
animation: none;
}
.jforma-loghi--fits-4 .jforma-loghi__item:is(:has(+ .jforma-loghi__item--clone), :last-child) {
width: calc((100cqw + var(--jforma-loghi-space)) / var(--jforma-loghi-per-row) - var(--jforma-loghi-space));
padding-inline-end: 0;
}
.jforma-loghi--fits-4 .jforma-loghi__item--clone,
.jforma-loghi--fits-4 .jforma-loghi__prev,
.jforma-loghi--fits-4 .jforma-loghi__next {
display: none;
}
}
@media (width >= 1200px) {
.jforma-loghi--fits-5 {
justify-content: center;
padding-inline: 0;
}
.jforma-loghi--fits-5 .jforma-loghi__track {
flex: none;
width: max-content;
overflow: visible;
animation: none;
}
.jforma-loghi--fits-5 .jforma-loghi__item:is(:has(+ .jforma-loghi__item--clone), :last-child) {
width: calc((100cqw + var(--jforma-loghi-space)) / var(--jforma-loghi-per-row) - var(--jforma-loghi-space));
padding-inline-end: 0;
}
.jforma-loghi--fits-5 .jforma-loghi__item--clone,
.jforma-loghi--fits-5 .jforma-loghi__prev,
.jforma-loghi--fits-5 .jforma-loghi__next {
display: none;
}
}