/* Marka wlasna: zdjecie, haslo, wstep z grafika, oferta (naglowek na zdjeciu + dwie listy), opakowania.
   Wartosci z PROD (strony 1355 i 770). */

.label-photo {
  min-height: 34.833vw;
  background: url("/assets/img/Private_LABEL.webp") top center / cover no-repeat;
}

/* --- Haslo --- */
.label-claim {
  --band-width: 59.317vw;
  padding: 100px 20px 120px;
  background: var(--color-primary);
}
.label-claim__title {
  position: relative;
  margin: 0;
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: var(--color-white);
}
.page--en .label-claim__title { letter-spacing: .2px; }

/* --- Wstep: grafika po lewej (126% szerokosci wzgledem tresci), tekst po prawej --- */
.label-intro { --band-width: 67.13vw; padding-top: 20px; }
.label-intro__inner { flex-direction: row; }
.label-intro__box { position: relative; width: 100%; color: var(--color-primary); text-align: center; }
.label-intro__img { display: inline-block; width: 126%; margin: 0; }
.label-intro__img img { display: block; }
.label-intro__content { width: 100%; }
.label-intro__title { font-size: 2.3rem; font-weight: 700; }
.page--en .label-intro__title { font-weight: 600; }
.label-intro__text {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* --- Oferta --- */
.label-offer { position: relative; display: flex; flex-direction: column; }
.label-offer__head {
  --band-width: 58.449vw;
  padding: 0 20px;
  background: url("/assets/img/what_we_offer.webp") center / cover no-repeat;
}
.label-offer__title {
  position: relative;
  margin: 0;
  padding: 180px 0 210px;
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary);
}
.page--en .label-offer__title { padding-bottom: 170px; }

.label-offer__lists {
  --band-width: 70.602vw;
  padding: 55px 20px;
  background: var(--color-primary) url("/assets/img/Group-5.svg") no-repeat 90% -24%;
}
.label-offer__inner { flex-direction: row; justify-content: space-between; gap: 80px; }
.label-offer__col { position: relative; width: 50%; max-width: 50%; }
.label-offer__col--first { width: 54%; max-width: 54%; }
.label-offer__list {
  color: var(--color-white);
  font-family: var(--font);
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: var(--lh-body);
  text-transform: uppercase;
}
/* Wciecie jako margines listy wewnatrz kolumny (jak na PROD) - wplywa na podzial szerokosci przy kurczeniu. */
.label-offer__col--first .label-offer__list { margin-left: 115px; }

/* --- Opakowania na kolach --- */
.label-products { --band-width: 72.338vw; padding: 60px 20px 50px; }
.label-products__inner { flex-direction: row; gap: 76px; }
.label-products__item { position: relative; text-align: center; }
.label-products__item img { display: inline-block; vertical-align: middle; }
.label-products__item--jar { align-self: center; flex: 1 0 auto; padding-top: 30px; }
.label-products__item--jar img { max-width: 21.586vw; }
.label-products__item::after {
  content: "";
  position: absolute;
  top: 53%;
  left: 50%;
  z-index: -1;
  width: 70%;
  height: 55%;
  border-radius: 50%;
  background: var(--color-accent);
  transform: translate(-50%, -50%);
}
.label-products__item--bag::after { top: 50%; width: 105%; height: 75%; }

@media (min-width: 768px) {
  .label-intro__box { display: flex; align-items: center; text-align: start; }
}

@media (max-width: 1024px) {
  .label-claim { padding: 50px 20px; }
  .label-intro { padding: 50px 20px; }
  .label-intro__img { width: 100%; margin-right: 20px; }
  .label-offer__head { padding: 0 20px; }
  .label-offer__title,
  .page--en .label-offer__title { padding: 50px 20px; }
  .label-offer__lists { padding: 50px 20px; background-position: 100% 100%; background-size: 0 auto; }
  .label-offer__inner { gap: 20px; }
  .label-offer__col--first .label-offer__list { margin-left: 0; }
  .label-products { padding: 50px 20px; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .label-claim,
  .label-intro,
  .label-offer__head,
  .label-offer__lists,
  .label-products { --band-width: 100%; }
}

@media (max-width: 767px) {
  .label-claim,
  .label-intro,
  .label-offer__head,
  .label-offer__lists,
  .label-products { --band-width: var(--content-width); }
  .label-photo { min-height: 350px; }
  .label-claim__title { font-size: 1.8rem; }
  .label-intro__inner,
  .label-offer__inner,
  .label-products__inner { flex-wrap: wrap; }
  .label-intro__img { margin: 0 auto; }
  .label-offer__lists { background-position: 0 0; }
  .label-offer__col,
  .label-offer__col--first { width: 100%; max-width: 100%; }
  .label-products__inner { gap: 20px; }
  .label-products__item { width: 100%; }
  .label-products__item--jar { padding-top: 0; }
  .label-products__item--jar img { max-width: 100%; }
}