#items {width: 100%; float: left; margin: 0 0 40px 0;}
#items h2 {color: #414141; font-size: 40px; font-weight: 600;}
#items h2.withArrow {padding: 0 0 0 40px; background-image: url('/images/icon-arrow-right-special.png'); background-position: left bottom 14px; background-repeat: no-repeat;}
#items .inner {position: relative; width: 100%; float: left; display: flex; flex-wrap: wrap;}
#items .inner .item {position: relative; min-width: 280px; height: 400px; background-size: cover; background-position: center;}
#items .inner .item .name {position: absolute; width: calc(100% - 60px); margin: 0 30px 30px 30px; z-index: 100; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; color: white; font-size: 20px; font-weight: 600; opacity: 0; transform: translateY(20px); transition: all 0.3s ease;}
#items .inner .item .name .bordered {position: relative; display: flex; flex-direction: column; padding: 0 0 0 15px;}
#items .inner .item .name .bordered:before {content: ''; position: absolute; left: 0; top: 3px; width: 5px; height: calc(100% - 4px); background-color: #ffffff;}
#items .inner .item .name .bordered .title {font-size: 17px; font-weight: 500; line-height: 1.2;}
#items .inner .item .name .bordered .misto {margin-top: 6px; font-size: 13px; font-weight: 300; line-height: 1.2;}
#items .inner .item::after {content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.3); opacity: 0; transition: opacity 0.3s ease;}
#items .inner .item:hover::after {opacity: 1;}
#items .inner .item:hover .name {opacity: 1; transform: translateY(0);}

#items.pageProjekty .inner .item {width: calc(25% - 15px); margin: 10px 20px 10px 0; background-color: #f7f7f7;}
#items.pageProjekty .inner .item:nth-child(4n) {margin-right: 0;}

.item-swiper-button-next,
.item-swiper-button-prev {
  position: absolute;
  top: 50%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.item-swiper-button-prev { left: -80px;}
.item-swiper-button-next { right: -80px;}

/* vlastní šipky přes ::before */
.item-swiper-button-next::after,
.item-swiper-button-prev::after { display: none; }
.item-swiper-button-next::before,
.item-swiper-button-prev::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  border-top: 2px solid #424242;
  border-right: 2px solid #424242;
}
.item-swiper-button-next::before { transform: translate(-50%, -50%) rotate(45deg); left: calc(50% - 5px);}
.item-swiper-button-prev::before { transform: translate(-50%, -50%) rotate(-135deg); left: calc(50% + 5px);}