/* COMMON */
.mnbar { overflow: hidden; }
.mnbar__items { display: block; white-space: nowrap; font: 0/0 a; scroll-snap-type: x mandatory; overflow: auto; padding: 0 0 20px 0; }

.mnbar__item { display: inline-block; overflow: hidden; scroll-snap-align: start; width: 150px; height: 270px; cursor: pointer; position: relative; text-decoration: none; border-right: 1px solid #fff; }
.mnbar__image { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: #fff no-repeat 50% 50% / cover; transition: transform 400ms; }

.mnbar__item:hover .mnbar__image { transform: scale(1.1); }

.mnbar__item:last-child { border-right: 0; scroll-snap-align: end; }

@supports (display: flex) {
    .mnbar__items { display: flex; flex-wrap: nowrap; }
    .mnbar__item { flex: 0 0 auto; display: block; }
}

.mnbar__name { position: absolute; bottom: 20px; left: 0; right: 0; font: 700 25px/25px geometria, arial; color: #fff; text-align: center; text-shadow: 0 2px 20px rgba(0, 0, 0, .5); }

.mnbar { margin: 0 0 20px 0; border-radius: 3px; position: relative; height: 270px; }
.mnbar__items { scroll-behavior: smooth; }
.mnbar__item { -webkit-user-drag: none; user-drag: none; }

.mnbar__nav { position: absolute; width: 50px; height: 50px; z-index: 2; top: 0; bottom: 0; margin: auto; opacity: .2; cursor: default; transition: opacity 200ms; }
.mnbar__nav--left { left:10px; background: url(i/left_arrow.svg) no-repeat 50% 50%; }
.mnbar__nav--right { right:10px; background: url(i/right_arrow.svg) no-repeat 50% 50%; }
.mnbar__nav--active { cursor: pointer; opacity: 1; }