@import "template.scss";

.wrapper {
  position: relative;
}

.arrowLeft {
  position: absolute;
  top: calc(50% - 25px);
  left: -50px;
  cursor: pointer;
}

.arrowRight {
  position: absolute;
  right: -50px;
  top: calc(50% - 25px);
  cursor: pointer;
}

.arrowRight:hover svg, .arrowLeft:hover svg {
  stroke: $contrast-color;
}

.container {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.item {
  flex: 0 1 calc(33.333% - 20px);
  aspect-ratio: 1 / 1;
  animation: fadein 0.3s ease-out;
}

.disabled {
  opacity: 0.6;
  pointer-events: none;
  cursor: inherit;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to   {
    opacity: 1;
  }
}

@media screen and (max-width: 576px) {
  .item {
    flex: 0 0 100%;
    margin-bottom: 20px;
  }
}

@media screen and (max-width: 1200px) {
  .arrowLeft, .arrowRight {
    display: none;
  }
}