* {
  box-sizing: border-box;
}





.button-cont {
  /* position: absolute;
  bottom: 54vh;
  left: 50%;
  transform: translateX(-50%); */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 4rem;
  gap: 1rem;
  /* z-index: 10; */
} 



.wrapper-horz {
  height: 25vh;
  max-height: 50vh;
  width: 90%;
  /* border-left: dashed 2px var(--color-surface50);
  border-right: dashed 2px var(--color-surface50); */
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;

 
  -webkit-mask: linear-gradient(
    to left,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 6%,
    rgba(255, 255, 255, 1) 96%,
    rgba(255, 255, 255, 0) 100%
  );
  mask: linear-gradient(
    to left,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 6%,
    rgba(255, 255, 255, 1) 96%,
    rgba(255, 255, 255, 0) 100%
  );
}



.carousel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  padding: 0.5rem;
  flex-shrink: 0;
  height: 80%;
  aspect-ratio: 3/5;
  /* width: 20%;
  min-width: 150px; */

  
} 

.slide-image {
      height: 25vh;
      width: auto;


    }

.box__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 21px;
  cursor: pointer;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.show-overflow {
  overflow: visible;
}

.box .box__inner {
  background: linear-gradient(var(--color-just-black), var(--color-just-black))
      padding-box,
    var(--gradient) border-box;
  border: 3px solid transparent;
  border-radius: 10px;
}

.box {
  --gradient: var(--gradient-macha);
}

.box:nth-child(3n + 2) {
  --gradient: var(--gradient-summer-fair);
}

.box:nth-child(3n + 1) {
  --gradient: var(--gradient-orange-crush);
}

.box p {
  -webkit-text-fill-color: transparent;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 3rem;

}