html,
body {
  margin: 0;
  padding: 32px;
  font-family: "system-ui";
  height: 100dvh;
  background-color: #e0dfdf;
  box-sizing: border-box;
}

body {
  * {
    box-sizing: border-box;
  }
}

.wrapper {
  margin: 0 auto;
  max-width: 900px;
}

code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 1em;
  display: block;
}

.slider-wrapper {
  .slides-container {
    border-radius: 10px;
  }

  .track {
  }

  .slide {
    padding: 10px;
    .slide-content {
      text-align: center;
      border-radius: 10px;
      height: fit-content;
      background: #ffffff;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
      * {
        margin: 0;
      }
    }
  }

  .nav {
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    background: #2a2a2a;
    padding: 0;
    width: var(--nav-width);
    height: 40px;
    color: #fff;
    font-size: 18px;
    z-index: 10;
    border-radius: 50%;

    &:hover {
      opacity: 0.8;
    }
    &.prev {
      left: 0;
    }

    &.next {
      right: 0;
    }

    &.nav-active {
    }
  }
}