.board-photo{margin-bottom:40px}

.board-photo__stage{
  position:relative;
  background:#111;
  border-radius:var(--radius);
  overflow:hidden;
}

.board-photo__slide{
  position:relative;
  display:none;
}
.board-photo__slide.is-active{display:block}

.board-photo.has-slider .board-photo__slide{
  position:absolute;inset:0;
  display:block;
  opacity:0;
  transition:opacity .4s ease;
  pointer-events:none;
}
.board-photo.has-slider .board-photo__slide:first-child{position:relative}
.board-photo.has-slider .board-photo__slide.is-active{
  opacity:1;
  pointer-events:auto;
  z-index:1;
}

.board-photo__slide img{
  width:100%;
  aspect-ratio:3/2;
  object-fit:contain;
  background:#f5f5f5;
}
.board-photo__caption{
  position:absolute;left:0;right:0;bottom:0;
  padding:14px 20px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.7));
  color:#fff;
  font-size:var(--fs-sm);
}

.board-photo__arrow{
  position:absolute;top:50%;z-index:2;
  width:44px;height:44px;
  transform:translateY(-50%);
  background:rgba(0,0,0,.45);
  border:0;border-radius:50%;
  cursor:pointer;
  transition:var(--tr);
}
.board-photo__arrow:hover{background:rgba(0,0,0,.7)}
.board-photo__arrow::before{
  content:'';
  position:absolute;top:50%;left:50%;
  width:9px;height:9px;
  border-top:2px solid #fff;
  border-right:2px solid #fff;
}
.board-photo__arrow--prev{left:16px}
.board-photo__arrow--prev::before{transform:translate(-40%,-50%) rotate(-135deg)}
.board-photo__arrow--next{right:16px}
.board-photo__arrow--next::before{transform:translate(-60%,-50%) rotate(45deg)}

.board-photo__thumbs{
  display:flex;flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.board-photo__dot{
  width:74px;height:56px;
  padding:0;
  background:none;
  border:2px solid transparent;
  border-radius:var(--btn-radius);
  overflow:hidden;
  cursor:pointer;
  opacity:.55;
  transition:var(--tr);
}
.board-photo__dot img{width:100%;height:100%;object-fit:cover}
.board-photo__dot:hover{opacity:1}
.board-photo__dot.is-active{
  border-color:var(--c-primary);
  opacity:1;
}

@media (max-width:1024px){
  .board-photo__arrow{width:36px;height:36px}
  .board-photo__dot{width:56px;height:42px}
}