* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrapper {
  height: 100vh;
  display: grid;
  place-items: center;
}

.slider-container {
  width: min(1000px,90vw);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;

  & button {
    background-color: transparent;
    border: none;
    outline: none;
    height: min-content;
    cursor: pointer;

    & span { font-size: 2.75rem; }
  }

  & .slider {
    width: inherit;
    font: 900 1.25rem helvetica,sans-serif;
    border: 4px solid #000;
    overflow: hidden;
    
    & .slider-track {
      display: flex;
      list-style-type: none;
      transition: transform 0.8s;

      & li {
        min-width: 100%;
        aspect-ratio: 16/7;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
      }
    }
  }
}

.slider-dots {
  list-style-type: none;
  display: flex;
  justify-content: center;
  gap: 0.3rem;
  margin-top: 1.5rem;

  & button {
    width: 1.75vmin;
    height: 1.75vmin;
    background-color: transparent;
    outline: none;
    border: 3px solid #000;
    border-radius: 1.5vmin;
    cursor: pointer;
  }

  .active { background-color: black; }
}