.featured-product {
  padding: var(--nova-space-sm) var(--nova-space-2xs);

  @media screen and (min-width: 768px) {
    padding: var(--nova-space-xs-1);
  }
}

.featured-product--block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: round;
  aspect-ratio: .8;

  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  width: 100%;
  max-width: 100%;

  @media screen and (min-width: 768px) {
    aspect-ratio: 1;
    max-width: 50%;
  }
}

.featured-product--container nova-product-card {
  padding-bottom: 0px;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  max-width: 18.4rem;

  @media screen and (min-width: 768px) {
    max-width: 378px;
  }

  &.product-card-2 {
    display: block;
    position: relative;
    max-width: 100%;

    @media screen and (min-width: 768px) {
      display: none;
    }

    &::part(card-element) {
      width: 100%;
    }
  }

  &::part(media-element) {
    @media screen and (min-width: 768px) {
      margin: var(--nova-space-xs-1) var(--nova-space-xs-1) 0;
    }
  }

  &::part(quick-shop-element) {
    right: var(--nova-space-xs);
  }

  &::part(content-element) {
    padding: var(--nova-space-2xs);
    font: var(--nova-desktop-body-font);
    width: 100%;

    @media screen and (min-width: 768px) {
      padding: var(--nova-space-xs-1) var(--nova-space-md);
    }
  }

  &::part(product-header-element) {
    flex-direction: row;
    margin-bottom: 0;
  }

  &::part(product-title-element),
  &::part(product-price-element) {
    font: var(--nova-desktop-body-font);
  }

  &::part(product-regular-price-element),
  &::part(product-sale-price-element) {
    font: var(--nova-desktop-body-font);
  }
}

.featured-product--container-desktop,
.featured-product--container-mobile {
  width: 100%;
}

.featured-product--container-desktop {
  display: none;

  @media screen and (min-width: 768px) {
    display: flex;
  }
}

.featured-product--container-mobile {
  display: flex;

  @media screen and (min-width: 768px) {
    display: none;
  }
}

.featured-product--container-mobile .featured-product--mobile-images {
  width: 100%;
  padding-bottom: calc(var(--nova-space-sm) * 2 + 1px);
}

.featured-product--mobile-images img {
  width: 100%;
  height: auto;
  aspect-ratio: 36 / 45;
  object-fit: cover;
  object-position: center;
  display: block;
}

.featured-product--mobile-images .swiper-scrollbar.swiper-scrollbar-horizontal {
  width: 100%;
  position: relative;
  left: 0;
  bottom: calc(-1 * var(--nova-space-sm));
  height: 1px;
}