.partnerek-sor {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 5rem;
padding: 2rem 0;
}
.partner-icon {
flex: 0 0 auto;
transition: transform 0.3s ease;
}
.partner-icon:hover {
transform: scale(1.1);
}
.partner-icon img {
display: block;
max-width: 100%;
height: auto;
}
.tooltip-three img {
width: 250px !important;
}
.tooltip-one::after {
content: "Szigeti Autósiskola – Pécs";
bottom: -2.5rem;
}
.tooltip-two::after {
content: "Motorbox, Motoros árúház – Pécs";
bottom: -3rem;
}
.tooltip-three::after {
content: "Red Baron Motoros árúház";
bottom: -3rem;
}
.tooltip-wrapper::after {
white-space: nowrap;
position: absolute;
left: 50%;
transform: translateX(-50%) translateY(5px);
background-color: transparent;
color: white;
border: 1px solid var(--light-grey);
padding: 12px 25px;
border-radius: 6px;
opacity: 0;
transition: opacity 0.5s ease, transform 0.5s ease;
font-size: 14px;
z-index: 10;
}
.tooltip-wrapper:hover::after {
opacity: 1;
transform: translateX(-50%) translateY(-5px);
}
@media only screen and (max-width: 1070px) {
.partnerek-sor {
gap: 3rem;
}
}
@media only screen and (max-width: 860px) {
.carousel-track {
gap: 3rem;
} .partnerek-sor {
overflow-x: auto;
position: relative;
overflow: hidden;
width: 100%;
padding: 3rem 0;
display: block; -webkit-mask-image: linear-gradient(to right,
transparent 0%,
black 10%,
black 90%,
transparent 100%);
mask-image: linear-gradient(to right,
transparent 0%,
black 10%,
black 90%,
transparent 100%);
} .carousel-track {
display: flex;
align-items: center;
width: max-content; cursor: grab;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
touch-action: pan-y; } .carousel-track .partner-icon {
flex-shrink: 0;
margin: 0 2rem;
transition: transform 0.3s ease;
} .partnerek-sor:hover .carousel-track {
animation-play-state: paused;
} .carousel-track.dragging {
animation: none !important;
cursor: grabbing;
} .carousel-track .partner-icon:hover {
transform: scale(1.15);
z-index: 10;
} .carousel-track .partner-icon img {
display: block;
width: 150px;
height: auto;
filter: grayscale(20%);
transition: filter 0.3s ease;
} .carousel-track .partner-icon:hover img {
filter: grayscale(0%);
} @keyframes scroll-left {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
} @media only screen and (max-width: 480px) { .carousel-track {
animation-duration: 30s;
} .carousel-track .partner-icon img {
width: 120px;
} .carousel-track .partner-icon {
margin: 0 1.5rem;
}
}  @media (prefers-reduced-motion: reduce) {
.carousel-track {
animation: none !important;
}
.partnerek-sor {
overflow-x: auto;
-webkit-mask-image: none;
mask-image: none;
}
.carousel-track {
animation: none;
}
}  .partnerek-sor:not(.carousel-initialized) .partner-icon.duplicate {
display: none;
}  .tooltip-wrapper {
position: relative;
} @media only screen and (max-width: 860px) {
.carousel-track:not(:hover) .tooltip-wrapper::before,
.carousel-track:not(:hover) .tooltip-wrapper::after {
display: none;
}
}