.hxg-hero-videos {
  background: rgb(218 174 65);
}

body:has(.hxg-hero-videos) {
  background: rgb(218 174 65);
}

.hxg-hero-videos,
.hxg-hero-videos * {
  box-sizing: border-box;
}

.hxg-hero-videos__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 18px 18px;
  background: rgb(216 184 120);
}

.hxg-hero-videos__card {
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: 0;
  overflow: hidden;
  border-radius: 6px;
  color: rgb(255 247 225);
  background: rgb(36 15 16);
}

.hxg-hero-videos__media,
.hxg-hero-videos__media theme-video-media,
.hxg-hero-videos__media .theme-video-media,
.hxg-hero-videos__media .theme-video-media__media,
.hxg-hero-videos__media .theme-video-media__poster,
.hxg-hero-videos__media video,
.hxg-hero-videos__media iframe,
.hxg-hero-videos__media img,
.hxg-hero-videos__placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hxg-hero-videos__media {
  z-index: 0;
}

.hxg-hero-videos__media video,
.hxg-hero-videos__media iframe,
.hxg-hero-videos__media img {
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  object-fit: cover;
}

.hxg-hero-videos__placeholder {
  background:
    radial-gradient(circle at 18% 22%, rgb(216 184 120 / 22%), transparent 32%),
    radial-gradient(circle at 85% 72%, rgb(176 139 67 / 24%), transparent 36%),
    linear-gradient(135deg, rgb(36 15 16), rgb(96 67 45));
}

.hxg-hero-videos__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgb(36 15 16 / 30%);
  pointer-events: none;
}

.hxg-hero-videos__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  min-width: 0;
  padding: 36px 44px;
  pointer-events: none;
}

.hxg-hero-videos__badge {
  min-width: 150px;
  margin: 0 0 16px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  color: rgb(255 247 225);
  text-align: center;
  background: rgb(128 45 48);
}

.hxg-hero-videos__title {
  max-width: 560px;
  margin: 0;
  font-size: 54px;
  font-weight: 800;
  line-height: 1.05;
  color: rgb(255 190 132);
  overflow-wrap: anywhere;
  white-space: normal;
  word-break: break-word;
}

.hxg-hero-videos__text {
  max-width: 460px;
  margin: 18px 0 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.65;
  color: rgb(255 247 225);
  overflow-wrap: anywhere;
  white-space: normal;
  word-break: break-word;
}

.hxg-hero-videos__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 320px);
  min-height: 40px;
  margin-top: 26px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  color: rgb(36 15 16);
  text-decoration: none;
  background: rgb(255 190 132);
  pointer-events: auto;
}

.hxg-hero-videos__badge,
.hxg-hero-videos__title,
.hxg-hero-videos__text,
.hxg-hero-videos__button {
  animation: hxg-hero-content-enter 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hxg-hero-videos__badge {
  animation-delay: 0.08s;
}

.hxg-hero-videos__title {
  animation-delay: 0.18s;
}

.hxg-hero-videos__text {
  animation-delay: 0.28s;
}

.hxg-hero-videos__button {
  animation-delay: 0.38s;
}

@keyframes hxg-hero-content-enter {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hxg-hero-videos__badge,
  .hxg-hero-videos__title,
  .hxg-hero-videos__text,
  .hxg-hero-videos__button {
    animation: none;
  }
}

@media (max-width: 959px) {
  .hxg-hero-videos__inner {
    max-width: 100%;
    padding: 0 12px 12px;
  }

  .hxg-hero-videos__content {
    padding: 16px;
  }

  .hxg-hero-videos__badge {
    min-width: 0;
    margin-bottom: 8px;
    padding: 5px 10px;
    font-size: 11px;
  }

  .hxg-hero-videos__title {
    max-width: 260px;
    font-size: 22px;
    line-height: 1.14;
  }

  .hxg-hero-videos__text {
    display: none;
  }

  .hxg-hero-videos__button {
    width: auto;
    min-height: 34px;
    margin-top: 12px;
    padding: 8px 14px;
    font-size: 12px;
  }
}