* {
  box-sizing: border-box;
}

.carousel {
    --max-width: 980px;

    max-width: var(--max-width);
    margin: 0 auto;
    position: relative;
    anchor-name: --carousel;
}

.carousel_track {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 0;
  margin: 0;
  list-style: none;
  overflow: hidden;
  scroll-marker-group: after;
}

.carousel_track::-webkit-scrollbar {
  display: none;
}

.carousel_slide {
  --min-height: 420px;
  --items: 100%;

  flex: 0 0 var(--items);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-height: var(--min-height);
  display: grid;
  place-items: center;
  overflow: visible;
}

.card {
  --width-min: 80%;
  --width-max: 560px;
  --border-radius: 10px;
  --min-height: 220px;

  display: grid;
  place-items: center;
  align-content: start;
  width: min(var(--width-min), var(--width-max));
  min-height: var(--min-height);
  border-radius: var(--border-radius);
  font-size: clamp(10px, 1vw, 48px);
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #4f46e5, #06b6d4);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
  word-break: break-all;
  overflow: hidden;
}

/* Strzałki tworzone przez CSS */
.carousel_track::scroll-button(*) {
    --size: 54px;

  border: 0;
  width: var(--size);
  height: var(--size);
  border-radius: 999px;
  cursor: pointer;
  position: absolute;
  position-anchor: --carousel;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  font-size: 34px;
  line-height: 1;
  color: #111;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  opacity: 0.92;
}

.carousel_track::scroll-button(*):hover,
.carousel_track::scroll-button(*):focus {
  opacity: 1;
}

.carousel_track::scroll-button(*):active {
  translate: 1px calc(-50% + 1px);
}

.carousel_track::scroll-button(*):disabled {
  opacity: 0.2;
  cursor: default;
}

.carousel_track::scroll-button(left) {
  content: "‹" / "Poprzedni";
  left: 16px;
  translate: -30% -50%;
}

.carousel_track::scroll-button(right) {
  content: "›" / "Następny";
  right: 16px;
  translate: 30% -50%;
}

/* Kontener kropek */
.carousel_track::scroll-marker-group {
  --gap: 10px;
  --margin-top: 0px;
  --bottom: -15px;

  display: flex;
  justify-content: center;
  gap: var(--gap);
  margin-top: var(--margin-top);
  position: absolute;
  position-anchor: --carousel;
  bottom: var(--bottom);
  justify-self: anchor-center;
}

/* Pojedyncza kropka dla każdego slajdu */
.carousel_slide::scroll-marker {
  --size: 12px;
  width: var(--size);
  height: var(--size);
  border-radius: 999px;
  border: 0;
  background: #bdbdbd;
  opacity: 0.55;
  content: "";
}

.carousel_slide::scroll-marker:hover {
  opacity: 0.85;
}

.carousel_slide::scroll-marker:target-current {
  --background: rgb(198 33 37);
  background: var(--background);
  opacity: 1;
  transform: scale(1.3);
}

@media (max-width: 640px) {
  .carousel_slide {
    min-height: 320px;
  }

  .carousel_track::scroll-button(*) {
    width: 46px;
    height: 46px;
    font-size: 30px;
  }
}