.slider {
  display: grid;
  grid-template-areas: 'carousel' 'controls';
}

.btn-play-toggle {
  background-color: transparent;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE0LDE5SDE4VjVIMTRNNiwxOUgxMFY1SDZWMTlaIiAvPjwvc3ZnPg==');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px;
  border: 0;
  cursor: pointer;
  height: 25px;
  width: 25px;
}

.btn-play-toggle:focus,
.btn-play-toggle:hover {
  background-color: transparent;
}

.btn-play-toggle.stop {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTgsNS4xNFYxOS4xNEwxOSwxMi4xNEw4LDUuMTRaIiAvPjwvc3ZnPg==');
}

.btn-play-toggle.stop .stop {
  display: none;
}

.btn-play-toggle.stop .play {
  display: block;
}

.btn-play-toggle .play {
  display: none;
}

.slides {
  display: flex;
  gap: 25px;
  grid-area: carousel;
  overflow: scroll;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.slides::-webkit-scrollbar {
  height: 0;
  width: 0;
}

.slide {
  align-items: center;
  color: inherit;
  display: grid;
  flex: 1 0 100%;
  justify-items: center;
  scroll-snap-align: start;
  width: 100%;
}

.slide:focus,
.slide:hover {
  color: inherit;
  text-decoration: none;
}

.slide figcaption {
  font-size: 14px;
  text-align: center;
}

.slide img {
  max-width: 100%;
}

.slide .slide-text {
  align-self: flex-end;
  justify-self: flex-end;
  padding: 5px 2px;
}

.btn-slider {
  align-self: center;
  background-color: #ffffff;
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid #000000;
  cursor: pointer;
  display: none;
  grid-area: carousel;
  height: 40px;
  outline: 2px solid #ffffff;
  padding: 0;
  width: 40px;
}

.btn-slider:focus,
.btn-slider:hover {
  background-color: var(--color-white);
}

.btn-slider.btn-next {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTguNTksMTYuNThMMTMuMTcsMTJMOC41OSw3LjQxTDEwLDZMMTYsMTJMMTAsMThMOC41OSwxNi41OFoiIC8+PC9zdmc+');
  justify-self: flex-end;
}

.btn-slider.btn-prev {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE1LjQxLDE2LjU4TDEwLjgzLDEyTDE1LjQxLDcuNDFMMTQsNkw4LDEyTDE0LDE4TDE1LjQxLDE2LjU4WiIgLz48L3N2Zz4=');
  justify-self: flex-start;
}

.slider-controls {
  align-items: center;
  align-self: flex-end;
  display: flex;
  justify-self: center;
  gap: 25px;
}

.slider-dots {
  align-items: center;
  display: flex;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding-inline-start: 0;
}

.slider-dot {
  border: 2px solid #000000;
  border-radius: 100%;
  cursor: pointer;
  display: block;
  height: 12px;
  width: 12px;
}

.slider-dot.selected {
  background-color: #ff0000;
}

@media (min-width: 1024px) {
  .btn-slider {
    display: block;
  }

  .btn-slider.btn-next {
    margin-right: -20px;
  }

  .btn-slider.btn-prev {
    margin-left: -20px;
  }
}

@media (min-width: 1280px) {
  .btn-slider.btn-next {
    margin-right: -40px;
  }

  .btn-slider.btn-prev {
    margin-left: -40px;
  }
}

@media (min-width: 1400px) {
  .btn-slider.btn-next {
    margin-right: -60px;
  }

  .btn-slider.btn-prev {
    margin-left: -60px;
  }
}