.controls {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 24px;
}
.control {
  background-color: var(--color-primary--1);
  color: var(--color-white);
  border-radius: 50%;
  border: 1px solid white;
  display: flex;
  text-indent: -9999px;
  overflow: hidden;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}
.control::before{
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.control--prev::before{
  background-image: url('../../images/icons/arrow-white-left-mobile.svg');
}
.control--next::before {
  background-image: url('../../images/icons/arrow-white-right-mobile.svg');
}


.control--white {
  background-color: transparent;
  border-color: #A9A9A9;
}

.control--prev.control--white::before{
  background-image: url('../../images/icons/arrow-grey-left-mobile.svg');
}
.control--next.control--white::before {
  background-image: url('../../images/icons/arrow-grey-right-mobile.svg');
}