@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0");

root {
  --accent: #a7917a;
  --fade-accent: #87715a;
  --text-on-light: #000;
  --background: #fff;
  --text-on-dark: #fff;
  --field: #fff;
  --field-tooltip: #a0a0a0;
}

body {
  font-family: "Lexend", sans-serif !important;
}

.slider-wrapper {
  position: relative;
}

.slider-wrapper .image-list {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 18px;
  overflow-x: auto;
  scrollbar-width: none;
}

.slider-wrapper .image-list .image-item {
  width: 400px;
  height: 400px;
  object-fit: cover;
}

.slider-wrapper .slide-button {
  height: 50px;
  width: 50px;
  color: #fff;
  border: none;
  outline: none;
  background: #000;
  font-size: 2.2rem;
  cursor: pointer;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.slider-wrapper .slide-button:hover {
  background: #444;
}

.slider-wrapper .slide-button#prev-slide {
  left: -20px;
}

.slider-wrapper .slide-button#next-slide {
  right: -20px;
}

@media (pointer: coarse) {
  .slider-wrapper .slide-button {
    display: none !important;
  }

  .slider-wrapper .image-list {
    gap: 10px;
    margin-bottom: 15px;
  }

  .slider-wrapper .image-list .image-item {
    width: 300px;
    height: 300px;
  }
}