: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-full-width-media {
  display: flex;
  justify-content: center;
  padding: var(--spacing-lg) 0;
}
.block__huddle-full-width-media .wrapper {
  max-width: var(--container-xl-max-width);
  width: 100%;
  padding: var(--spacing-md);
  position: relative;
  overflow: hidden;
  border-radius: 14px;
}
.block__huddle-full-width-media .wrapper .bg-wheel {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  z-index: 0;
  display: flex;
  align-items: center;
}
.block__huddle-full-width-media .wrapper .bg-wheel svg {
  width: 100%;
  height: 100%;
}
.block__huddle-full-width-media .wrapper .bg-wheel svg .fill-primary {
  fill: var(--color-brand-cream);
}
.block__huddle-full-width-media .wrapper .bg-wheel svg .fill-bg {
  fill: var(--color-brand-orange);
}
.block__huddle-full-width-media .wrapper .media {
  aspect-ratio: 16/9;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.block__huddle-full-width-media .wrapper .media img, .block__huddle-full-width-media .wrapper .media video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (max-width: 768px) {
  .block__huddle-full-width-media {
    padding: var(--spacing-sm) 0;
  }
  .block__huddle-full-width-media .wrapper {
    padding: var(--spacing-sm);
  }
  .block__huddle-full-width-media .wrapper .bg-wheel {
    width: 200%;
    height: 200%;
    top: -60%;
  }
  .block__huddle-full-width-media .wrapper .media {
    aspect-ratio: 29/36;
  }
}