.px-product {
  position: relative;
  container-type: inline-size;
}
.px-product-inner {
  width: var(--baseWidth);
  max-width: var(--maxWidth);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@container (width <= 1024px) {
  .px-product-inner {
    flex-direction: column;
    gap: 20px;
  }
}
.px-product-inner .col {
  width: 50%;
}
@container (width <= 1024px) {
  .px-product-inner .col {
    width: 100%;
  }
}
.px-product-inner .col.text .text-inner {
  width: calc(100% + 205px);
  transform: translateX(-205px);
  background: var(--contrastColorInverted);
  padding: clamp(1.7647058824rem, 0.5564387917rem + 6.4189189189vw, 6.2352941176rem) clamp(1.7647058824rem, 0.333863275rem + 7.6013513514vw, 7.0588235294rem) clamp(1.7647058824rem, 0.5564387917rem + 6.4189189189vw, 6.2352941176rem) clamp(7.0588235294rem, 6.4228934817rem + 3.3783783784vw, 9.4117647059rem);
  box-shadow: 0 2px 15px 0 rgba(var(--contrastColorRGB), 0.1);
}
@container (width <= 1024px) {
  .px-product-inner .col.text .text-inner {
    padding: 30px;
    width: 100%;
    transform: translateY(-35px) translateX(20px);
  }
}
@container (width <= 768px) {
  .px-product-inner .col.text .text-inner {
    transform: translateY(-35px) translateX(0);
  }
}
.px-product-inner .col.text .button {
  margin-top: 20px;
}
.px-product-inner .col.image {
  background: var(--mainGradient);
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-around;
}
.px-product-inner .col.image .category {
  color: var(--contrastColorInverted);
  font-family: var(--headline);
  font-size: clamp(2.9411764706rem, 1.6693163752rem + 6.7567567568vw, 7.6470588235rem);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  position: absolute;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  opacity: 0.1;
  left: 20px;
}
@container (width <= 1024px) {
  .px-product-inner .col.image {
    order: -1;
  }
}
.px-product-inner .col.image .image-big {
  height: 100%;
  padding: clamp(1.7647058824rem, 0.6518282989rem + 5.9121621622vw, 5.8823529412rem) clamp(3.5294117647rem, 3.2114467409rem + 1.6891891892vw, 4.7058823529rem) clamp(1.7647058824rem, 0.6518282989rem + 5.9121621622vw, 5.8823529412rem) clamp(1.7647058824rem, 0.2543720191rem + 8.0236486486vw, 7.3529411765rem);
  z-index: 1;
}
.px-product-inner .col.image .image-big img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  display: block;
}
.px-product.imageposition-left .px-product-inner {
  flex-direction: row-reverse;
}
@container (width <= 1024px) {
  .px-product.imageposition-left .px-product-inner {
    flex-direction: column;
    gap: 20px;
  }
}
.px-product.imageposition-left .px-product-inner .col.image .category {
  left: unset;
  right: 20px;
}
@container (width <= 1024px) {
  .px-product.imageposition-left .px-product-inner .col.image {
    order: -1;
  }
}
.px-product.imageposition-left .px-product-inner .col.image .image-big {
  padding: clamp(1.7647058824rem, 0.6518282989rem + 5.9121621622vw, 5.8823529412rem) clamp(1.7647058824rem, 0.2543720191rem + 8.0236486486vw, 7.3529411765rem) clamp(1.7647058824rem, 0.6518282989rem + 5.9121621622vw, 5.8823529412rem) clamp(3.5294117647rem, 3.2114467409rem + 1.6891891892vw, 4.7058823529rem);
}
.px-product.imageposition-left .px-product-inner .col.text .text-inner {
  width: calc(100% + 205px);
  transform: translateX(0);
  padding: clamp(1.7647058824rem, 0.5564387917rem + 6.4189189189vw, 6.2352941176rem) clamp(7.0588235294rem, 6.4228934817rem + 3.3783783784vw, 9.4117647059rem) clamp(1.7647058824rem, 0.5564387917rem + 6.4189189189vw, 6.2352941176rem) clamp(1.7647058824rem, 0.333863275rem + 7.6013513514vw, 7.0588235294rem);
}
@container (width <= 1024px) {
  .px-product.imageposition-left .px-product-inner .col.text .text-inner {
    padding: 30px;
    width: 100%;
    transform: translateY(-35px) translateX(20px);
  }
}
@container (width <= 768px) {
  .px-product.imageposition-left .px-product-inner .col.text .text-inner {
    transform: translateY(-35px) translateX(0);
  }
}
