.gn-news-carousel {
  --gn-news-navy: #061b45;
  --gn-news-blue: #3189ed;
  --gn-news-cyan: #48c9ec;
  --gn-news-water: #effcff;
  width: min(100%, 820px);
  margin: 0 auto clamp(28px, 4vw, 46px);
  color: var(--gn-news-navy);
  font-family: Ubuntu, Arial, sans-serif;
  outline: none;
}

.gn-news-carousel,
.gn-news-carousel * {
  box-sizing: border-box;
}

.gn-news-carousel__viewport {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  border: 1px solid rgba(49, 137, 237, 0.18);
  border-radius: clamp(24px, 4vw, 42px);
  background:
    radial-gradient(circle at 16% 8%, rgba(72, 201, 236, 0.26), transparent 36%),
    linear-gradient(145deg, #effcff, #dff8ff);
  box-shadow: 0 25px 65px rgba(8, 97, 139, 0.17);
  touch-action: pan-y;
}

.gn-news-carousel__slides,
.gn-news-carousel__slide {
  width: 100%;
  height: 100%;
}

.gn-news-carousel__slide {
  margin: 0;
}

.gn-news-carousel__slide[hidden] {
  display: none;
}

.gn-news-carousel__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gn-news-carousel__arrow {
  position: absolute;
  z-index: 3;
  top: 50%;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  transform: translateY(-50%);
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 999px;
  background: rgba(6, 27, 69, 0.84);
  color: #fff;
  box-shadow: 0 12px 30px rgba(6, 27, 69, 0.25);
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease;
}

.gn-news-carousel__arrow--prev { left: 16px; }
.gn-news-carousel__arrow--next { right: 16px; }

.gn-news-carousel__arrow:hover {
  transform: translateY(-50%) scale(1.05);
  background: var(--gn-news-blue);
}

.gn-news-carousel__arrow svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
}

.gn-news-carousel__count {
  position: absolute;
  z-index: 3;
  right: 18px;
  bottom: 17px;
  min-width: 58px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  background: rgba(6, 27, 69, 0.84);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
}

.gn-news-carousel__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 12px 0;
}

.gn-news-carousel__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(18, 53, 107, 0.28);
  cursor: pointer;
  transition: width 180ms ease, background 180ms ease;
}

.gn-news-carousel__dot.is-active {
  width: 30px;
  background: var(--gn-news-blue);
}

.gn-news-carousel :is(button):focus-visible,
.gn-news-carousel:focus-visible {
  outline: 4px solid rgba(49, 137, 237, 0.48);
  outline-offset: 4px;
}

@media (max-width: 600px) {
  .gn-news-carousel {
    width: 100%;
    margin-bottom: 30px;
  }

  .gn-news-carousel__viewport {
    border-radius: 24px;
  }

  .gn-news-carousel__arrow {
    width: 42px;
    height: 42px;
  }

  .gn-news-carousel__arrow--prev { left: 10px; }
  .gn-news-carousel__arrow--next { right: 10px; }
  .gn-news-carousel__count { right: 12px; bottom: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .gn-news-carousel *,
  .gn-news-carousel *::before,
  .gn-news-carousel *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}