:root {
  --swiper-pagination-bottom: -5px;
}

.swiper {
    width: 100%;
    padding-left: 1.5em;
    padding-right: 1.5em;
    mask-image: linear-gradient(to right, transparent 0%, black 1% 99%, transparent 100%);
}

.swiper-slide {
    max-width: 250px;
    margin: 0.25em 0.5em 0.25em 0.5em;
}

.swiper-slide:first-child {
  margin-left: 0.75em;
}

.swiper-slide:last-child {
  margin-right: 0.75em;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper-button {
    color: #333;

    top: 90px !important;
    width: 2.0em;
    height: 2.0em;
    padding: 0.5em;

    border-radius: 100%;

    border: 1px solid #fb0;
}

.swiper-button-disabled {
    opacity: 0 !important;
    color: #777;
}

.swiper-button-prev {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(128, 128, 128, 0.4) 100%);
}

.swiper-button-next {
    background: linear-gradient(90deg, rgba(128, 128, 128, 0.4) 0%, rgba(0, 0, 0, 0.5) 100%);
}

svg.swiper-navigation-icon {
  stroke-width: 5px;
  stroke: #fb0;
}

.d-grid {
    display: grid;
}

.carousel-static {
  display: grid;
  grid-template-rows: auto min-content auto;
}

.excerpt {
  margin-top: 1ex;
  padding-top: 0.5ex;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media (min-width: 768px) {
  .playlist-grid {
      grid-template-columns: 24vw auto;
  }

  .carousel-static {
      margin-right: 0.5em;
  }
}

@media (min-width: 1200px) {
  .playlist-grid {
      grid-template-columns: 21vw auto;
  }
}

@media (min-width: 1500px) {
  .playlist-grid {
      grid-template-columns: 18vw auto;
  }
}

@media (min-width: 2000px) {
  .playlist-grid {
      grid-template-columns: 15vw auto;
  }
}