.control-buttons{
  display:inline-flex;
  gap:.3rem;
  justify-content:center;
}
.control-buttons:has(button:only-child) .control-buttons__btn{
  margin:0 auto;
}

.control-buttons__btn{
  align-items:center;
  background-color:transparent;
  border:1px solid #15a8f1;
  border-radius:50%;
  cursor:pointer;
  display:flex;
  height:2.5rem;
  justify-content:center;
  margin:0;
  outline:transparent;
  padding:0;
  transition:.3s ease-in-out;
  width:2.5rem;
}
@media screen and (min-width:768px){
  .control-buttons__btn{
    height:3rem;
    width:3rem;
  }
}

.control-buttons__btn:hover{
  background-color:#15a8f1;
  color:#fff;
}

.control-buttons__btn-prev:before{
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%2315a8f1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14 6-6 6 6 6'/%3E%3C/svg%3E") no-repeat 50%/contain;
}

.control-buttons__btn-next:before,.control-buttons__btn-prev:before{
  color:#15a8f1;
  content:"";
  display:block;
  height:24px;
  width:24px;
}

.control-buttons__btn-next:before{
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%2315a8f1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m10 6 6 6-6 6'/%3E%3C/svg%3E") no-repeat 50%/contain;
}

.control-buttons__btn:hover:before{
  filter:brightness(0) invert(1);
}

.control-buttons__btn--bg-color-white{
  background-color:#fff;
}