:root {
  --button-background: var(--color-brand-orange);
  --button-color: var(--color-text-primary);
  --button-secondary-color: var(--color-text-primary);
  --button-secondary-hover-color: var(--color-text-secondary);
  --button-secondary-hover-background: var(--color-brand-black);
  --button-hover-color: var(--color-text-primary);
}

.block__huddle-multi-media {
  display: flex;
  justify-content: center;
  margin: var(--spacing-lg) 0;
}
.block__huddle-multi-media:has(+ .block__huddle-multi-media) {
  margin-bottom: var(--spacing-sm);
}
.block__huddle-multi-media + .block__huddle-multi-media {
  margin-top: var(--spacing-sm);
}
.block__huddle-multi-media .wrapper {
  max-width: var(--container-xl-max-width);
  width: 100%;
  display: flex;
  gap: var(--spacing-sm);
}
.block__huddle-multi-media .wrapper .media {
  max-height: 665px;
  height: 80vh;
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-medium);
}
.block__huddle-multi-media .wrapper .media img, .block__huddle-multi-media .wrapper .media video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}
.block__huddle-multi-media .wrapper .media .caption {
  position: absolute;
  bottom: var(--spacing-smd);
  left: var(--spacing-smd);
  display: inline-block;
  padding: var(--spacing-smm) var(--spacing-sm);
  background: var(--color-surface-primary);
  border-radius: var(--radius-large);
  color: var(--color-text-primary);
  font: var(--type-b1);
}
@media screen and (max-width: 768px) {
  .block__huddle-multi-media {
    margin: var(--spacing-md) 0;
    margin-bottom: 60px;
  }
  .block__huddle-multi-media .wrapper .media {
    width: var(--container-width);
  }
  .block__huddle-multi-media .wrapper .media .caption {
    left: var(--spacing-sm);
    bottom: var(--spacing-sm);
    max-width: calc(100% - var(--spacing-sm) * 2);
  }
  .block__huddle-multi-media .wrapper .slick-dots {
    position: absolute;
    bottom: -40px;
    right: 50%;
    transform: translateX(50%);
    display: flex;
    gap: 16px;
    list-style: none !important;
  }
  .block__huddle-multi-media .wrapper .slick-dots li button {
    font-size: 0;
    border: none;
    background: rgb(235, 235, 235);
    width: 13px;
    height: 13px;
    border-radius: 50%;
    transition: background 0.3s;
  }
  .block__huddle-multi-media .wrapper .slick-dots li.slick-active button {
    background: var(--color-brand-orange);
  }
}