.mqf {
--mqf-h: 80px;
--mqf-h-mb: 50px;
--mqf-gap: 60px;
--mqf-py: 20px;
--mqf-opacity: 1;
--mqf-bg: transparent;
--mqf-duration: 40s;
--mqf-fade: 8%;
position: relative;
width: 100%;
overflow: hidden;
padding: var(--mqf-py) 0;
background: var(--mqf-bg);
box-sizing: border-box;
}
.mqf--fade {
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--mqf-fade), #000 calc(100% - var(--mqf-fade)), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 var(--mqf-fade), #000 calc(100% - var(--mqf-fade)), transparent 100%);
}
.mqf__track {
display: flex;
width: max-content;
animation: mqf-scroll var(--mqf-duration) linear infinite;
will-change: transform;
}
.mqf--right .mqf__track {
animation-direction: reverse;
}
.mqf--pause:hover .mqf__track,
.mqf--pause:focus-within .mqf__track,
.mqf.is-offscreen .mqf__track {
animation-play-state: paused;
}
.mqf .mqf__group {
display: flex;
flex-shrink: 0;
align-items: center;
gap: var(--mqf-gap);
margin: 0;
padding: 0 var(--mqf-gap) 0 0;
list-style: none;
}
.mqf .mqf__item {
flex-shrink: 0;
margin: 0;
padding: 0;
list-style: none;
}
.mqf .mqf__item::before,
.mqf .mqf__item::marker {
content: none;
}
.mqf .mqf__link {
display: flex;
align-items: center;
justify-content: center;
height: var(--mqf-h);
text-decoration: none;
border: 0;
box-shadow: none;
outline-offset: 4px;
}
.mqf .mqf__img {
display: block;
width: auto;
max-width: none;
height: 100%;
max-height: var(--mqf-h);
object-fit: contain;
margin: 0;
opacity: var(--mqf-opacity);
transition: filter .3s ease, opacity .3s ease, transform .3s ease;
}
.mqf--gray .mqf__img {
filter: grayscale(1);
}
.mqf .mqf__item:hover .mqf__img,
.mqf .mqf__link:focus-visible .mqf__img {
filter: none;
opacity: 1;
}
@keyframes mqf-scroll {
from { transform: translate3d(0, 0, 0); }
to   { transform: translate3d(-50%, 0, 0); }
}
@media (max-width: 767px) {
.mqf {
--mqf-fade: 12%;
}
.mqf .mqf__link {
height: var(--mqf-h-mb);
}
.mqf .mqf__img {
max-height: var(--mqf-h-mb);
}
.mqf .mqf__group {
gap: calc(var(--mqf-gap) * .6);
padding-right: calc(var(--mqf-gap) * .6);
}
} @media (prefers-reduced-motion: reduce) {
.mqf {
overflow-x: auto;
-webkit-mask-image: none;
mask-image: none;
}
.mqf__track {
animation: none;
}
.mqf__group[aria-hidden="true"] {
display: none;
}
}