.blog-preview-carousel-wrapper {
  --carousel-wrapper-width: calc(100vw - var(--scrollbar-size));
  --carousel-card-width: 800px;
  --carousel-padding-side: calc(
    (var(--carousel-wrapper-width) - var(--carousel-card-width)) / 2
  );

  --color-title-text: var(--color-card-text);
  --color-event-text: var(--color-card-text);
  --color-more-text: hsl(0 0% 90% / 1);
  --color-introduction-text: var(--color-card-text-darker);

  margin: 2em 0;
  width: var(--carousel-wrapper-width);
  overflow: hidden;
  position: relative;
}

.blog-preview-carousel-wrapper ::-webkit-scrollbar-track {
  background: none;
  margin: 0 calc(var(--carousel-padding-side) - 4px);
}

.blog-preview-carousel {
  display: flex;
  gap: 1em;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  padding: 1em var(--carousel-padding-side);
}

.blog-preview-card,
.blog-preview-show-more {
  scroll-snap-align: center;
  background: var(--color-card-back);
  padding: 1.5em;
  border-radius: 8px;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
}

.blog-preview-show-more {
  flex: 0 0 144px;
  display: block;
  height: fit-content;
  margin-top: auto;
  margin-bottom: auto;
  text-align: center;
}
.blog-preview-show-more:hover {
  background: var(--color-card-back-hover);
}

.blog-preview-card {
  flex: 0 0 var(--carousel-card-width);
  display: grid;
  row-gap: 0.8em;
  column-gap: 1em;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "img title event"
    "img introduction introduction"
    "img more .";
}

.blog-preview-img {
  grid-area: img;
}

.blog-preview-img img {
  width: 250px;
  height: 250px;
  object-fit: cover;
  border-radius: 8px;
  overflow: hidden;
}

.blog-preview-title {
  grid-area: title;
  color: var(--color-title-text);
}

.blog-preview-introduction {
  grid-area: introduction;
  color: var(--color-introduction-text);
  text-align: start;
  overflow: hidden;
}

.blog-preview-introduction > span {
  white-space: pre-line;
}

.blog-preview-event {
  grid-area: event;
  text-align: end;
  color: var(--color-event-text);
}

.blog-preview-more {
  grid-area: more;
  text-align: center;
  font-weight: 500;
  padding-bottom: 1em;
}

.blog-preview-more a,
.blog-preview-show-more {
  text-decoration: none;
  color: var(--color-more-text);
  padding: 1em;
}

@media (prefers-color-scheme: light) {
  .blog-preview-carousel-wrapper {
    --color-event-text: hsl(0 0% calc(100% - 80%) / 1);
    --color-more-text: hsl(0 0% calc(100% - 90%) / 1);
  }
}

@media (max-width: 1000px) {
  .blog-preview-carousel-wrapper {
    --carousel-card-width: 90%;
    margin: 0;
  }

  .blog-preview-carousel {
    margin: 0;
  }

  .blog-preview-carousel-wrapper ::-webkit-scrollbar-track {
    margin: 0 calc(100vw * 0.05);
  }
}