.v3-new .v3-articles {
  --art-lime: #abd03b;
  --art-lime-soft: #8cff9d;
  padding: 0 0 var(--section-y);
  font-family: var(--v3-font);
}

.v3-new .v3-articles .section-head {
  justify-content: flex-start;
  margin-bottom: 22px;
}

.v3-new .v3-articles .section-head h2 {
  max-width: 42rem;
  color: var(--md-ink);
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.v3-new .v3-articles__carousel {
  --art-per: 3;
  --art-gap: 20px;
  --art-nav: 48px;
  container-type: inline-size;
  display: grid;
  grid-template-columns: var(--art-nav) minmax(0, 1fr) var(--art-nav);
  grid-template-areas:
    "prev viewport next"
    ". dots .";
  align-items: start;
  gap: 16px 8px;
}

.v3-new .v3-articles__viewport {
  grid-area: viewport;
  overflow: hidden;
}

.v3-new .v3-articles__track {
  display: flex;
  width: 100%;
  gap: var(--art-gap);
  will-change: transform;
  transition: transform 0.4s ease;
}

.v3-new .v3-articles__card {
  flex: 0 0 calc((100% - (var(--art-per) - 1) * var(--art-gap)) / var(--art-per));
  min-width: 0;
}

.v3-new .v3-articles__link {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.v3-new .v3-articles__link:hover .v3-articles__ribbon,
.v3-new .v3-articles__link:focus-visible .v3-articles__ribbon {
  background: color-mix(in srgb, var(--art-lime) 82%, #6f8f1c);
}

.v3-new .v3-articles__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  background: #d7dee6;
}

.v3-new .v3-articles__media > img:first-child {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v3-new .v3-articles__badge {
  position: absolute;
  left: 0;
  bottom: 18px;
  display: flex;
  align-items: center;
  max-width: calc(100% - 16px);
}

.v3-new .v3-articles__icon {
  z-index: 1;
  display: inline-flex;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-right: -10px;
  border-radius: 50%;
  background: var(--art-lime);
  box-shadow: 0 2px 8px rgba(13, 33, 55, 0.16);
}

.v3-new .v3-articles__ribbon {
  min-width: 0;
  padding: 8px 26px 8px 18px;
  overflow: hidden;
  background: var(--art-lime);
  color: #fff;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 100%, 0 100%);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.25;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.v3-new .v3-articles__card p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--md-ink);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.v3-new .v3-articles__nav {
  --art-media-h: calc(((100cqi - var(--art-nav) * 2 - var(--art-gap) * (var(--art-per) - 1)) / var(--art-per)) * 0.75);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-top: calc(var(--art-media-h) / 2 - 22px);
  padding: 0;
  border: 1px solid #d9dee6;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
  color: #8a93a0;
  cursor: pointer;
}

.v3-new .v3-articles__nav[data-articles-prev] {
  grid-area: prev;
}

.v3-new .v3-articles__nav[data-articles-next] {
  grid-area: next;
}

.v3-new .v3-articles__nav:hover {
  border-color: #c5ccd6;
  color: var(--md-ink);
}

.v3-new .v3-articles__nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.v3-new .v3-articles__dots {
  grid-area: dots;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.v3-new .v3-articles__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #c5cdd6;
  cursor: pointer;
}

.v3-new .v3-articles__dot.is-active {
  width: 28px;
  border-radius: 999px;
  background: var(--art-lime);
}

.v3-new .v3-articles__link:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 4px;
}

@media (max-width: 720px) {
  .v3-new .v3-articles__carousel {
    --art-per: 1;
    --art-nav: 40px;
    --art-gap: 12px;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
  }

  .v3-new .v3-articles__nav {
    width: 36px;
    height: 36px;
    margin-top: calc(var(--art-media-h) / 2 - 18px);
  }

  .v3-new .v3-articles .section-head h2 {
    font-size: 20px;
    letter-spacing: 0.03em;
  }

  .v3-new .v3-articles__ribbon {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v3-new .v3-articles__track {
    transition: none;
  }
}