.root {
    width: 100vw;
    height: 100vh;
    
  }

.title {
    color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
    font-family:
        Greycliff CF,
        var(--mantine-font-family);
}
  
  
  .mobileImage {
    @media (min-width: 48em) {
      display: none;
    }
  }
  
.desktopImage {
    object-fit: cover;
    width: 100%;
    height: 100%;
    @media (max-width: 47.99em) {
      display: none;
    }
  }

.carousel-wrapper {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
}
 
.gradient-control {
  width: 15%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 2;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  color: white;
  pointer-events: all;
}
 
/* First control is left */
.gradient-control:first-of-type {
  left: 0;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001));
}
 
/* Last control is right */
.gradient-control:last-of-type {
  right: 0;
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001));
}