.controls {
    /* margin-block-end: 20px; */
  }
  
  .button {
    cursor: pointer;
    user-select: none;
  }
  
  .button-radio {
    background-color: transparent;
    margin: 0;
    padding: 0;
    inline-size: 15px;
    block-size: 15px;
    border-radius: 50%;
    border: 1px solid #FFFFFF;
  }
  
  .button-radio + .button-radio {
    margin-inline-start: 12px;
  }
  
  .button-radio.active {
    background-color: #C56FFF;
    pointer-events: none;
  }
  
  .button-radio:focus-visible {
    outline: 3px solid white;
    outline-offset: -1px;
  }
  
  .button-prev,
  .button-next {
    position: absolute;
    inset-block-start: 50%;
    transform: translateY(-50%);
    border: none;
    inline-size: 30px;
    block-size: 42px;
    background-color: transparent;
    background-image: url(./images/arrow.svg);
    background-repeat: no-repeat;
    background-size: contain;
  }
  
  .button-prev[aria-disabled="true"],
  .button-next[aria-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
  }
  
  .button-prev {
    inset-inline-start: 80%;
  }
  
  .button-next {
    inset-inline-end: 4%;
    transform: translateY(-50%) rotateY(180deg);
    transform-origin: center;
  }
  
  .slide-img {
    display: block;
    inline-size: 100%;
    /* block-size: 225px;
    max-block-size: 225px; */
    block-size: auto;
    object-fit: cover;
    object-position: center;
  }
  
  .slider {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-inline-size: 100%;
    inline-size: 100%;
    position: relative;
  }
  
  .slides {
    inline-size: 100%;
  }
  
  .slide {
    display: none;
    text-align: center;
  }
  
  .slide--active {
    display: block;
  }
  
  @media (max-width: 768px) {
    .slider {
      /* max-inline-size: 260px; */
    }
  
    .slide-img {
      /* block-size: 400px; */
    }
  
    .button-prev {
      inset-inline-start: -40px;
    }
  
    .button-next {
      inset-inline-end: -40px;
    }
  }