.system-slider-wrapper { margin-bottom: var(--plugin-margin-bottom-large); }
.system-slider-item { width: 30%; }
.system-slider-item:not(:last-child) { margin-right: 3px; }
.system-slider-item-image-wrapper { overflow: hidden; margin-bottom: 25px; }
.system-slider-item-image { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; transition: 0.3s linear; }
.system-slider-item-name { color: #FFF; padding-inline: 50px; font-size: 1.4rem; line-height: 1.9rem; letter-spacing: 0.05rem; text-align: center; text-transform: uppercase; font-weight: 300; }
.system-slider-arrow { position: absolute; cursor: pointer; display: flex; justify-content: center; align-items: center; top: 50%; transform: translateY(-50%); background: #FFF; width: 50px; height: 50px; z-index: 10; border-radius: 50%; }
.system-slider-arrow.swiper-button-disabled { cursor: default; opacity: 0.5; }
.system-slider-arrow-previous { left: 40px; }
.system-slider-arrow-next { right: 40px; }
.system-slider-arrow-icon { width: 25px; transition: 0.3s linear; }
.system-slider-arrow-previous .system-slider-arrow-icon { transform: rotate(180deg); }

@media (pointer:fine) {
    .system-slider-item:hover .system-slider-item-image { transform: scale(1.05); }
    .system-slider-arrow:not(.swiper-button-disabled):hover .system-slider-arrow-icon { fill: var(--secondary-color); }
}

@media (pointer:coarse) {
    .system-slider-arrow { display: none; }
}

@media (min-width:2200px) {
    .system-slider-item { width: 22%; }

}

@media (max-width:1400px) {
    .system-slider-item-name { padding-inline: 30px; font-size: 1.3rem; line-height: 1.8rem; }
}

@media (max-width:1200px) {
    .system-slider-item { width: 40%; }
    .system-slider-item-name { padding-inline: 20px; font-size: 1.25rem; line-height: 1.7rem; }
}

@media (max-width:1023px) {
    .system-slider-item { width: 40%; }
    .system-slider-arrow-previous { left: 20px; }
    .system-slider-arrow-next { right: 20px; }
}

@media (max-width:767px) {
    .system-slider-item { width: 60%; }
    .system-slider-arrow { display: none; }
}

@media (max-width:640px) {
    .system-slider-item { width: 75%; }
    .system-slider-item-name { padding-inline: 10px; font-size: 1.15rem; line-height: 1.5rem; }
}