/**
 * Products Section Styles
 *
 * @package PhilFred
 */

/* ==========================================================================
   HOME PRODUCTS
   ========================================================================== */

.home-products {
  position: relative;
  z-index: 2;
  overflow: hidden;
  /* Safari repaint fix for overflow:hidden */
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.home-products__container {
  padding-top: 140px;
  padding-bottom: 140px;
}

@media (max-width: 1440px) {
  .home-products__container {
    padding-top: calc(214px + -74 * (100vw - 390px) / 1050);
  }
}

@media (max-width: 1440px) {
  .home-products__container {
    padding-bottom: calc(102px + 38 * (100vw - 390px) / 1050);
  }
}

.home-products__body {
  margin-bottom: 125px;
  position: relative;
  z-index: 10;
}

@media (max-width: 1440px) {
  .home-products__body {
    margin-bottom: calc(100px + 25 * (100vw - 390px) / 1050);
  }
}

.home-products__item {
  max-width: 26.5625rem;
}

.home-products__item:nth-child(1) {
  margin-bottom: 164px;
}

@media (max-width: 1440px) {
  .home-products__item:nth-child(1) {
    margin-bottom: calc(164px + 0 * (100vw - 390px) / 1050);
  }
}

@media (min-width: 24.375rem) {
  .home-products__item:nth-child(1) {
    margin-left: 617px;
  }
}

@media (min-width: 24.375rem) and (max-width: 1440px) {
  .home-products__item:nth-child(1) {
    margin-left: calc(0px + 617 * (100vw - 390px) / 1050);
  }
}

.home-products__item:nth-child(2) {
  margin-bottom: 100px;
}

@media (max-width: 1440px) {
  .home-products__item:nth-child(2) {
    margin-bottom: calc(55px + 45 * (100vw - 390px) / 1050);
  }
}

@media (min-width: 24.375rem) {
  .home-products__item:nth-child(2) {
    margin-left: 387px;
  }
}

@media (min-width: 24.375rem) and (max-width: 1440px) {
  .home-products__item:nth-child(2) {
    margin-left: calc(0px + 387 * (100vw - 390px) / 1050);
  }
}

@media (max-width: 50.3125rem) {
  .home-products__item:nth-child(2) {
    max-width: 16.9375rem;
  }
}

.home-products__item:nth-child(3) {
  margin-left: 844px;
}

@media (max-width: 1440px) {
  .home-products__item:nth-child(3) {
    margin-left: calc(117px + 727 * (100vw - 390px) / 1050);
  }
}

.home-products__label {
  margin-bottom: 0.5rem;
}

.home-products__title {
  margin-bottom: 0.5rem;
}

.home-products__footer-actions {
  text-align: center;
  position: relative;
  z-index: 10;
}

/* Decor / Images
   ========================================================================== */

.home-products__decor {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.home-products__image {
  position: absolute;
  height: 800px;
  width: 800px;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
  /* Safari repaint fix - forces initial render */
  -webkit-animation: safariRepaintProducts 0.001s;
  animation: safariRepaintProducts 0.001s;
}

/* Safari repaint animation - forces initial render */
@-webkit-keyframes safariRepaintProducts {
  from { opacity: 0.999; }
  to { opacity: 1; }
}

@keyframes safariRepaintProducts {
  from { opacity: 0.999; }
  to { opacity: 1; }
}

.home-products__image img {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  width: 100%;
  height: 100%;
}

@media (max-width: 1440px) {
  .home-products__image {
    height: calc(350px + 450 * (100vw - 390px) / 1050);
  }
}

@media (max-width: 1440px) {
  .home-products__image {
    width: calc(350px + 450 * (100vw - 390px) / 1050);
  }
}

.home-products__image-01 {
  top: 0;
  top: -427px;
  left: -307px;
  height: 938px;
  width: 938px;
}

@media (max-width: 1440px) {
  .home-products__image-01 {
    top: calc(-263px + -164 * (100vw - 390px) / 1050);
  }
}

@media (max-width: 1440px) {
  .home-products__image-01 {
    left: calc(-171px + -136 * (100vw - 390px) / 1050);
  }
}

@media (max-width: 1440px) {
  .home-products__image-01 {
    height: calc(480px + 458 * (100vw - 390px) / 1050);
  }
}

@media (max-width: 1440px) {
  .home-products__image-01 {
    width: calc(480px + 458 * (100vw - 390px) / 1050);
  }
}

.home-products__image-02 {
  right: 0;
  top: 173px;
  right: -371px;
  height: 788px;
  width: 788px;
}

@media (max-width: 1440px) {
  .home-products__image-02 {
    top: calc(404px + -231 * (100vw - 390px) / 1050);
  }
}

@media (max-width: 1440px) {
  .home-products__image-02 {
    right: calc(-200px + -171 * (100vw - 390px) / 1050);
  }
}

@media (max-width: 1440px) {
  .home-products__image-02 {
    height: calc(345px + 443 * (100vw - 390px) / 1050);
  }
}

@media (max-width: 1440px) {
  .home-products__image-02 {
    width: calc(345px + 443 * (100vw - 390px) / 1050);
  }
}

.home-products__image-03 {
  left: 0;
  bottom: 0;
  bottom: -100px;
  left: -390px;
  height: 735px;
  width: 893px;
}

@media (max-width: 1440px) {
  .home-products__image-03 {
    bottom: calc(217px + -317 * (100vw - 390px) / 1050);
  }
}

@media (max-width: 1440px) {
  .home-products__image-03 {
    left: calc(-219px + -171 * (100vw - 390px) / 1050);
  }
}

@media (max-width: 1440px) {
  .home-products__image-03 {
    height: calc(343px + 392 * (100vw - 390px) / 1050);
  }
}

@media (max-width: 1440px) {
  .home-products__image-03 {
    width: calc(358px + 535 * (100vw - 390px) / 1050);
  }
}

/* Footer / Crawl
   ========================================================================== */

.home-products__footer {
  background: #fff;
  position: relative;
  z-index: 10;
}

.home-products__crawl {
  padding-block: 14px;
  gap: 48px;
  border-top: 0.125rem solid #636363;
}

@media (max-width: 1440px) {
  .home-products__crawl {
    padding-block: calc(13px + 1 * (100vw - 390px) / 1050);
  }
}

@media (max-width: 1440px) {
  .home-products__crawl {
    gap: calc(24px + 24 * (100vw - 390px) / 1050);
  }
}

.home-products__crawl span {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 100%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1d1d1d;
}

@media (max-width: 1440px) {
  .home-products__crawl span {
    font-size: calc(26px + 6 * (100vw - 390px) / 1050);
  }
}

@media (max-width: 47.9988rem) {
  .home-products__crawl span {
    color: #636363;
    line-height: 108%;
  }
}

.home-products__crawl span.home-products__bold {
  font-family: "Edo", sans-serif;
  font-weight: 400;
  font-size: 42px;
  line-height: 114%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #82e09e;
}

@media (max-width: 1440px) {
  .home-products__crawl span.home-products__bold {
    font-size: calc(28px + 14 * (100vw - 390px) / 1050);
  }
}

@media (max-width: 47.9988rem) {
  .home-products__crawl span.home-products__bold {
    color: #66b07c;
  }
}
