/**
 * @file
 * Pin Slider styles
 */

.pin-slider {
  display: grid;
  grid-template-columns: repeat(6, 198.5px);
  gap: 2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 50%;
  padding: 1rem 1rem 2rem;
  width: 100%;
  margin: 0 auto;
  max-width: 1408px;
}
.pin-slider .pin {
  scroll-snap-align: center;
}
@media all and (min-width: 1000px) {
  .pin-slider {
    grid-template-columns: repeat(3, 198.5px);
    justify-content: center;
  }
}
@media all and (min-width: 1250px) {
  .pin-slider {
    grid-template-columns: repeat(4, 198.5px);
    grid-template-areas:
    "a b c d"
    "e f g h";
  }
  .pin-slider .pin:nth-child(5) {
    grid-area: f;
  }
  .pin-slider .pin:nth-child(6) {
    grid-area: g;
  }
}
@media all and (min-width: 1500px) {
  .pin-slider {
    grid-template-columns: repeat(6, 198.5px);
    grid-template-areas: none;
  }
  .pin-slider .pin:nth-child(5) {
    grid-area: initial;
  }
  .pin-slider .pin:nth-child(6) {
    grid-area: initial;
  }
}