.container {
  padding: unset;
  display: flex;
}

.hero-banner-container {
  padding: 8px;
  height: 100%;
}
@media (min-width: 1024px) {
  .hero-banner-container {
    display: flex;
    flex-direction: row;
    gap: 8px;
  }
}
.hero-banner-container .card-container {
  display: flex;
  gap: 32px;
  flex-direction: column;
  height: 100%;
}
@media (min-width: 1024px) {
  .hero-banner-container .card-container {
    max-width: 365px;
  }
}
@media (min-width: 1280px) {
  .hero-banner-container .card-container {
    width: 100%;
    max-width: none;
  }
}
.hero-banner-container .hero-card-container {
  display: flex;
  padding: 16px;
  flex-direction: column;
  align-self: stretch;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  position: relative;
  top: -24px;
}
@media (min-width: 1024px) {
  .hero-banner-container .hero-card-container {
    width: 100%;
    gap: 0px;
    padding: 32px;
    position: unset;
    top: unset;
    border-radius: 16px;
  }
}
.hero-banner-container .hero-card-container.full {
  height: 564px;
}
@media (min-width: 1024px) {
  .hero-banner-container .hero-card-container.full {
    height: 740px;
  }
}
.hero-banner-container .hero-card-container.short {
  height: 446px;
}
@media (min-width: 1024px) {
  .hero-banner-container .hero-card-container.short {
    height: 570px;
  }
}
.hero-banner-container .hero-card-container.scalable {
  top: 0px;
  height: 456px;
}
@media (min-width: 1024px) {
  .hero-banner-container .hero-card-container.scalable {
    height: auto;
  }
}
.hero-banner-container .hero-card-container .card-container {
  display: flex;
  gap: 32px;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .hero-banner-container .hero-card-container .card-container {
    max-width: 365px;
  }
}
@media (min-width: 1280px) {
  .hero-banner-container .hero-card-container .card-container {
    width: 100%;
    max-width: none;
  }
}
.hero-banner-container .hero-card-container .card-container .header-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}
@media (min-width: 1024px) {
  .hero-banner-container .hero-card-container .card-container .header-container {
    gap: 32px;
  }
}
.hero-banner-container .hero-card-container .card-container .header-container .tag {
  font-size: 18px;
}
@media (min-width: 1024px) {
  .hero-banner-container .hero-card-container .card-container .header-container .tag {
    font-size: unset;
  }
}
.hero-banner-container .hero-card-container .card-container .header-container .hero-heading {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}
.hero-banner-container .hero-card-container .card-container .header-container .hero-heading.full .title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 96px;
}
@media (min-width: 1024px) {
  .hero-banner-container .hero-card-container .card-container .header-container .hero-heading.full .title {
    max-height: 172px;
    -webkit-line-clamp: 3;
  }
}
.hero-banner-container .hero-card-container .card-container .header-container .hero-heading.full .description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 1024px) {
  .hero-banner-container .hero-card-container .card-container .header-container .hero-heading.full .description {
    max-height: 96px;
  }
}
@media (max-width: 479.98px) {
  .hero-banner-container .hero-card-container .card-container .header-container .hero-heading.full h2 {
    font-size: 22px;
  }
}
.hero-banner-container .hero-card-container .card-container .header-container .hero-heading.short .title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 96px;
}
@media (min-width: 1024px) {
  .hero-banner-container .hero-card-container .card-container .header-container .hero-heading.short .title {
    max-height: 172px;
  }
}
.hero-banner-container .hero-card-container .card-container .header-container .hero-heading.short .description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 72px;
}
@media (min-width: 1024px) {
  .hero-banner-container .hero-card-container .card-container .header-container .hero-heading.short .description {
    max-height: 96px;
  }
}
.hero-banner-container .hero-card-container .card-container .header-container .hero-heading.scalable .title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 96px;
}
@media (min-width: 1024px) {
  .hero-banner-container .hero-card-container .card-container .header-container .hero-heading.scalable .title {
    max-height: 172px;
    -webkit-line-clamp: 3;
  }
}
@media (min-width: 1024px) {
  .hero-banner-container .hero-card-container .card-container .header-container .hero-heading.scalable .title {
    font-size: 40px;
    line-height: 48px;
  }
}
.hero-banner-container .hero-card-container .card-container .header-container .hero-heading.scalable .description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 1024px) {
  .hero-banner-container .hero-card-container .card-container .header-container .hero-heading.scalable .description {
    max-height: 96px;
  }
}
@media (min-width: 1280px) {
  .hero-banner-container .hero-card-container .card-container .header-container .hero-heading.scalable .description {
    -webkit-line-clamp: 2;
  }
}
@media (max-width: 479.98px) {
  .hero-banner-container .hero-card-container .card-container .header-container .hero-heading.scalable h2 {
    font-size: 22px;
  }
}
.hero-banner-container .hero-card-container .card-container .header-container .hero-heading.dark .title {
  color: #ffffff;
}
.hero-banner-container .hero-card-container .card-container .header-container .hero-heading.dark .pc-body-m {
  color: #F5F4F5B2;
}
.hero-banner-container .hero-card-container .card-container .header-container .hero-heading .title {
  color: #0A0A0A;
}
.hero-banner-container .hero-card-container .card-container .header-container .hero-heading .pc-body-m {
  color: rgba(10, 10, 10, 0.6);
}
.hero-banner-container .hero-card-container .card-container .button-wrapper {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  width: 100%;
}
.hero-banner-container .hero-card-container .card-container .button-wrapper .module_button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-banner-container .hero-card-container .card-container .button-wrapper .experience-component {
  flex: 1 1 calc(50% - 8px);
}
.hero-banner-container .hero-card-container .card-container .button-wrapper .experience-component:nth-child(1):nth-last-child(1) .module_button {
  width: 50%;
}
.hero-banner-container .hero-card-container .card-container .button-wrapper .experience-component:nth-child(3):nth-last-child(1) {
  flex: 1 1 100%;
}
.hero-banner-container .hero-card-container .card-container .button-wrapper .experience-component:nth-child(5):nth-last-child(1) {
  flex: 1 1 100%;
}
.hero-banner-container .hero-card-container .controllers-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 16px;
  flex: 1 0 0;
  align-self: stretch;
  height: 100%;
  margin-top: 16px;
}
.hero-banner-container .hero-card-container .controllers-container .controls {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}
.hero-banner-container .hero-card-container .controllers-container .controls .play-pause {
  width: 100%;
}
.hero-banner-container .hero-card-container .controllers-container .controls .play-pause button {
  height: 48px;
  width: 48px;
  border-radius: 16px;
  border: 1px solid #0a0a0a1a;
  background-color: #0a0a0a00;
}
.hero-banner-container .hero-card-container .controllers-container .controls .controls-nav {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 8px;
}
.hero-banner-container .hero-card-container .controllers-container .controls .controls-nav .glide-nav {
  width: 23px;
  font-size: 14px;
  display: flex;
  align-items: center;
}
.hero-banner-container .hero-card-container .controllers-container .controls .controls-nav .glide-nav .current-slide {
  font-weight: 700;
}
.hero-banner-container .hero-card-container .controllers-container .controls .controls-nav .pc-glide-arrows {
  position: static;
  box-shadow: none;
}
.hero-banner-container .hero-card-container .controllers-container .controls .controls-nav .pc-glide-arrows .pc-glide-arrow-right,
.hero-banner-container .hero-card-container .controllers-container .controls .controls-nav .pc-glide-arrows .pc-glide-arrow-left {
  height: 48px;
  width: 48px;
  border-radius: 16px;
  border: 1px solid #0a0a0a1a;
  background-color: #0a0a0a00;
}
.hero-banner-container .hero-media-container {
  display: flex;
  width: 100%;
  padding: 0px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0px;
  align-self: stretch;
  position: relative;
}
.hero-banner-container .hero-media-container .hero-image {
  width: 100%;
  border-radius: 16px;
  background-color: lightgrey;
  -o-object-fit: cover;
     object-fit: cover;
}
.hero-banner-container .hero-media-container .hero-image.full {
  height: 273px;
}
@media (min-width: 1024px) {
  .hero-banner-container .hero-media-container .hero-image.full {
    width: 827px;
    height: 740px;
  }
}
.hero-banner-container .hero-media-container .hero-image.short {
  height: 273px;
}
@media (min-width: 1024px) {
  .hero-banner-container .hero-media-container .hero-image.short {
    width: 827px;
    height: 570px;
  }
}
.hero-banner-container .hero-media-container .hero-image.scalable {
  height: auto;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
@media (min-width: 1024px) {
  .hero-banner-container .hero-media-container .hero-image.scalable {
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    height: auto;
    width: 55vw;
    max-width: none;
    aspect-ratio: 1/1;
  }
}
@media (min-width: 1280px) {
  .hero-banner-container .hero-media-container .hero-image.scalable {
    width: 827px;
    height: 100%;
    aspect-ratio: 16/10;
  }
  .hero-banner-container .hero-media-container .hero-image.scalable::before {
    content: "";
    display: block;
    padding-top: calc(10 / 16 * 100%);
  }
}

.pc-banner-v1-content-text {
  left: 0;
  position: absolute;
  top: 50%;
  width: calc(100% - 32px);
}
@media (min-width: 1024px) {
  .pc-banner-v1-content-text {
    position: relative;
    top: auto;
    width: auto;
  }
}
.pc-banner-v1-content-text.two-buttons {
  top: 50%;
}
@media (min-width: 360px) {
  .pc-banner-v1-content-text.two-buttons {
    top: 50%;
  }
}
@media (min-width: 1024px) {
  .pc-banner-v1-content-text.two-buttons {
    top: auto;
  }
}

.pc-banner-v2 {
  margin-bottom: -10px;
}

.pc-banner-title {
  font-size: 1.625rem;
}
@media (min-width: 1024px) {
  .pc-banner-title {
    font-size: 2.0625rem;
  }
}

.pc-banner-button {
  font-size: 0.75rem;
}
@media (min-width: 1024px) {
  .pc-banner-button {
    font-size: 0.875rem;
  }
}

@media (max-width: 479.98px) {
  .pc-banner-v2-image-container {
    order: -1;
  }
}

.pc-banner-text-light {
  color: #fff;
}

@media (min-width: 1600px) {
  .fullwidthbanner .hero-card-container .card-container .header-container .hero-heading.scalable .title {
    font-size: 48px;
    line-height: 56px;
  }
}
@media (min-width: 1024px) {
  .fullwidthbanner .hero-media-container .hero-image {
    width: 65vw !important;
    max-width: none;
  }
}
.fullwidthbanner .hero-media-container .hero-image.scalable {
  width: 100%;
}
@media (min-width: 1024px) {
  .fullwidthbanner .hero-media-container .hero-image.scalable {
    width: 55vw !important;
    max-width: none;
    aspect-ratio: 1/1;
  }
  .fullwidthbanner .hero-media-container .hero-image.scalable::before {
    content: "";
    display: block;
    padding-top: calc(1 / 1 * 100%);
  }
}
@media (min-width: 1280px) {
  .fullwidthbanner .hero-media-container .hero-image.scalable {
    width: 60vw !important;
    max-width: none;
    aspect-ratio: 16/10;
    height: auto;
  }
  .fullwidthbanner .hero-media-container .hero-image.scalable::before {
    content: "";
    display: block;
    padding-top: calc(10 / 16 * 100%);
  }
}
@media (min-width: 1600px) {
  .fullwidthbanner .hero-media-container .hero-image.scalable {
    width: 65vw !important;
    max-width: none;
  }
}

.pc-body-xs.disclaimer-text {
  color: rgba(10, 10, 10, 0.6);
}

.dark .pc-body-xs.disclaimer-text {
  color: #F5F4F5B2;
}

/*# sourceMappingURL=default\css\experience\components\commerceAssets\banner.css.map*/