.wrapper { /* max-width: 1100px;*/ width: 100%; position: relative; border-bottom: 2px solid #DDD; }
    .wrapper i { z-index: 10; top: 50%; height: 50px; width: 50px; cursor: pointer; font-size: 1.25rem; position: absolute; text-align: center; line-height: 50px; /* background: #fff;*/ border-radius: 50%; /*box-shadow: 0 3px 6px rgba(0,0,0,0.23); */ transform: translateY(-50%); transition: transform 0.1s linear; }
        .wrapper i:active { transform: translateY(-50%) scale(0.85); }
        .wrapper i:first-child { left: -18px; }
        .wrapper i:last-child { right: -18px; }
    .wrapper .carousel { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% / 4) - 10px); overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; border-radius: 8px; scroll-behavior: smooth; scrollbar-width: none; }
.carousel::-webkit-scrollbar { display: none; }
.carousel.no-transition { scroll-behavior: auto; }
.carousel.dragging { scroll-snap-type: none; scroll-behavior: auto; }
    .carousel.dragging .card { cursor: grab; user-select: none; }
.carousel :where(.card, .img) { /*display: flex; justify-content: center; align-items: center;*/ }
.carousel .card { margin-right: 20px; display: list-item; scroll-snap-align: start; /*height: 342px;*/ list-style: disc; color: #D52829; cursor: pointer; /*padding-bottom: 15px;*/ flex-direction: column; border-radius: 0px; border: none; }
    .carousel .card .img { /*background: #DA0000;*/ height: 150px; width: 150px; border-radius: 50%; border: 2px solid #DDD; }
.card .img img { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; }
.carousel .card h5 { margin: 10px 0; text-align: left; font-weight: 500; font-size: 14px; line-height: 20px; }
.carousel .card:hover .img { border: 2px solid #DA0000; }
.carousel .card span { text-align: center; display: block /*color: #6A6D78; font-size: 1.31rem;*/ }
.carousel .card a { text-align: center; display: contents }
    .carousel .card a:hover h5{ color: #224484 }
@media screen and (max-width: 900px) {
    .wrapper .carousel { grid-auto-columns: calc((100% / 2) - 9px); }
}

@media screen and (max-width: 600px) {
    .wrapper .carousel { grid-auto-columns: 100%; }
}