.makes { margin: 20px 0; }
.makes h2  { margin-block-start: 15px; margin-block-end: 15px; }
.makes .center { position: relative; height: 100px; overflow: hidden; -ms-overflow-style: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; }

.makes .arrow { position: absolute; visibility: none; display: flex; align-items: center; justify-content: center; top: 30px; width: 14px; height: 14px; padding: 14px; border-radius: 12px; background-color: var(--text-opposite); font-family: siteicons; font-size: 15px; font-style: normal; cursor: pointer; opacity: 0; transition: .2s ease-out; box-shadow: 0px 3px 12px -5px rgba(0,0,0,.3); z-index: 2;}
.makes .arrow.arrow-left:before { content: '\0048'; }
.makes .arrow.arrow-right:before { content: '\0049'; }
.makes .arrow.arrow-left { left: -10px; }
.makes .arrow.arrow-right { right: -10px; }
.makes:hover .arrow { visibility: visible; opacity: 1; }
.makes:hover .arrow.arrow-left { left: 0; }
.makes:hover .arrow.arrow-right { right: 0; }

.makes .card-wrap { display: flex; gap: 30px; min-width: 100%; min-height: 120px; margin-top: 4px; overflow: auto; overflow-y: hidden; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; }
.makes .card-wrap .card { position: relative; height: 96px; width: auto; user-drag: none; -webkit-user-drag: none; user-select: none; }
.makes .card-wrap .card svg { fill: var(--text); height: 100%; width: auto; transition: fill .1s ease-out; user-drag: none; -webkit-user-drag: none; user-select: none; }
.makes .card-wrap .card:hover svg { fill: var(--text-blue); }

@media screen and (max-width: 1150px) {
.makes .center { padding: 0; width: 100%; }
.makes .card-wrap { gap: 14px; }
}