/* Minification failed. Returning unminified contents.
(2,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9,20): run-time error CSS1039: Token not allowed after unary operator: '-article-carousel-margin-top'
(10,23): run-time error CSS1039: Token not allowed after unary operator: '-article-carousel-margin-bottom'
(26,26): run-time error CSS1039: Token not allowed after unary operator: '-color-black-base'
(34,15): run-time error CSS1039: Token not allowed after unary operator: '-color-white-base'
(56,26): run-time error CSS1039: Token not allowed after unary operator: '-color-black-base'
(72,26): run-time error CSS1039: Token not allowed after unary operator: '-color-white-base'
(86,26): run-time error CSS1039: Token not allowed after unary operator: '-color-white-base'
(93,27): run-time error CSS1039: Token not allowed after unary operator: '-color-white-base'
(106,19): run-time error CSS1039: Token not allowed after unary operator: '-article-carousel-translate-index'
(152,26): run-time error CSS1039: Token not allowed after unary operator: '-color-black-base'
(187,15): run-time error CSS1039: Token not allowed after unary operator: '-color-white-base'
(188,19): run-time error CSS1039: Token not allowed after unary operator: '-font-size-heading-3'
(189,21): run-time error CSS1039: Token not allowed after unary operator: '-line-height-heading-3'
(199,27): run-time error CSS1039: Token not allowed after unary operator: '-color-white-base'
(251,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-heading-1'
(252,23): run-time error CSS1039: Token not allowed after unary operator: '-line-height-heading-1'
 */
.article-carousel-container {
  --article-carousel-margin-top: unset;
  --article-carousel-margin-bottom: unset;

  display: flex;
  clear: both;
  float: left;
  position: relative;
  margin-top: var(--article-carousel-margin-top);
  margin-bottom: var(--article-carousel-margin-bottom);
  width: 100%;
}

.article-carousel-container .article-carousel-gradient {
  background: transparent linear-gradient(180deg, transparent 25%, rgb(0, 0, 0) 110%);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}

.article-carousel-container .article-carousel {
  background-color: var(--color-black-base);
  position: relative;
  width: 100%;
}

.article-carousel-container .article-carousel .article-carousel-action {
  background-color: transparent;
  border: none;
  color: var(--color-white-base);
  position: absolute;
  font-size: 45px;
  z-index: 5;
  padding: 0;
}

.article-carousel-container .article-carousel .article-carousel-action-prev {
  left: 0;
  bottom: 10px;
}

.article-carousel-container .article-carousel .article-carousel-action-next {
  right: 0;
  bottom: 10px;
}

.article-carousel-container .article-carousel .article-carousel-action:hover {
  transform: scale(1.2);
}

.article-carousel-container .article-carousel .article-carousel-item-navigation {
  background-color: var(--color-black-base);
  display: flex;
  justify-content: center;
  column-gap: 16px;
  position: relative;
  bottom: 0;
  z-index: 4;
  padding: 10px 0 20px;
  width: 100%;
}

.article-carousel-container
  .article-carousel
  .article-carousel-item-navigation
  .article-carousel-item-navigation-button {
  background-color: transparent;
  border: 1px solid var(--color-white-base);
  border-radius: 50%;
  height: 20px;
  width: 20px;
}

.article-carousel-container
  .article-carousel
  .article-carousel-item-navigation
  .article-carousel-item-navigation-button.active,
.article-carousel-container
  .article-carousel
  .article-carousel-item-navigation
  .article-carousel-item-navigation-button:hover {
  background-color: var(--color-white-base);
}

.article-carousel-container
  .article-carousel
  .article-carousel-item-navigation
  .article-carousel-item-navigation-button:focus {
  outline: 1px solid var(--color-white-base);
  outline-offset: 2px;
}

.article-carousel-container .article-carousel .article-carousel-items {
  width: 100%;
  position: relative;
  touch-action: pan-y;
  overflow: hidden;
}

.article-carousel-container .article-carousel .article-carousel-items .article-carousel-item {
  position: absolute;
  left: calc(var(--article-carousel-translate-index) * 100%);
  top: 0;
  bottom: 0;
  width: 100%;
  will-change: left;
  transition: left 0.5s ease-in-out;
}

.article-carousel-container .article-carousel .article-carousel-items .article-carousel-item.active {
  position: relative;
}

.article-carousel-container
  .article-carousel
  .article-carousel-items
  .article-carousel-item
  .article-carousel-item-image {
  object-fit: cover;
  width: 100%;
}

.article-carousel-container
  .article-carousel
  .article-carousel-items
  .article-carousel-item
  .article-carousel-item-image
  picture {
  display: flex;
}

.article-carousel-container
  .article-carousel
  .article-carousel-items
  .article-carousel-item
  .article-carousel-item-image
  img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.article-carousel-container
  .article-carousel
  .article-carousel-items
  .article-carousel-item
  .article-carousel-item-body {
  background-color: var(--color-black-base);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  bottom: 0;
  width: 100%;
  padding: 10px 40px;
  z-index: 4;
}

.article-carousel-container
  .article-carousel
  .article-carousel-items
  .article-carousel-item
  .article-carousel-item-body
  .article-carousel-item-title {
  text-align: center;
}

.article-carousel-container
  .article-carousel
  .article-carousel-items
  .article-carousel-item
  .article-carousel-item-body
  .article-carousel-item-title,
.article-carousel-container
  .article-carousel
  .article-carousel-items
  .article-carousel-item
  .article-carousel-item-body
  .article-carousel-item-title
  a {
  font-weight: 600;
  color: var(--color-white-base);
  font-size: var(--font-size-heading-3);
  line-height: var(--line-height-heading-3);
}

.article-carousel-container
  .article-carousel
  .article-carousel-items
  .article-carousel-item
  .article-carousel-item-body
  .article-carousel-item-title
  a:focus {
  outline: 1px solid var(--color-white-base);
  outline-offset: 2px;
}

.article-carousel-container
  .article-carousel
  .article-carousel-items
  .article-carousel-item
  .article-carousel-item-body
  .article-carousel-item-title
  a:hover {
  text-decoration: underline;
}

@media (min-width: 768px) {
  .article-carousel-container .article-carousel .article-carousel-action-prev {
    left: 30px;
    bottom: 50px;
  }

  .article-carousel-container .article-carousel .article-carousel-action-next {
    right: 30px;
    bottom: 50px;
  }

  .article-carousel-container
    .article-carousel
    .article-carousel-items
    .article-carousel-item
    .article-carousel-item-image
    picture {
    display: unset;
  }

  .article-carousel-container
    .article-carousel
    .article-carousel-items
    .article-carousel-item
    .article-carousel-item-body {
    background-color: transparent;
    position: absolute;
    bottom: 100px;
    padding: 0 90px;
  }

  .article-carousel-container
    .article-carousel
    .article-carousel-items
    .article-carousel-item
    .article-carousel-item-body
    .article-carousel-item-title
    a {
    font-size: var(--font-size-heading-1);
    line-height: var(--line-height-heading-1);
  }

  .article-carousel-container .article-carousel .article-carousel-item-navigation {
    background-color: transparent;
    position: absolute;
    bottom: 60px;
    left: 50%;
    padding: 0;
    transform: translateX(-50%);
  }
}