.hero-container {
min-height: 555px;
}

.cms-hero {
  width: 100%;
}

.cms-product,
.cms-product img {
  width: 402px;
}

@media (max-width: 1199.98px) {
  .cms-product,
  .cms-product img {
    width: 337px;
  }

  .cms-product2 {
    left: 312px !important;
  }

  .cms-product3 {
    left: 608px !important;
  }
  .cms-product-container {
    height: 233px !important;
  }
}

@media (max-width: 991.98px) {
  .cms-product,
  .cms-product img {
    width: 250px;
  }

  .cms-product2 {
    left: 235px !important;
  }

  .cms-product3 {
    left: 454px !important;
  }

  .cms-product-container {
    height: 173px !important;
  }
}

@media (max-width: 767.98px) {
  .cms-product,
  .cms-product img {
    width: 185px;
  }

  .cms-product2 {
    left: 178px !important;
  }

  .cms-product3 {
    left: 340px !important;
  }
  .cms-product-container {
    height: 128px !important;
  }
}

@media (max-width: 575.98px) {
  .cms-product,
  .cms-product img {
    width: calc((100vw) / 2.92);
  }

  .cms-product2 {
    left: 50% !important;
    transform: translate(-50%, 0);
  }

  .cms-product3 {
    left: auto !important;
    right: 15px;
  }
  .cms-product-container {
    height: calc(100vw * 0.236) !important;
  }

  .cms-mid h2 {
    font-size: 1rem;
  }
}

.cms-mid {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  display: block;
}

.cms-mid h2 {
  margin: 0 !important;
}

.cms-product img,
.cms-mid {
  transition: opacity 0.3s;
  transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
  background-color: none;
}

.cms-product:hover img {
  opacity: 0.5;
}

.cms-product:hover .cms-mid {
  opacity: 1;
}

.cms-product1 {
  position: absolute;
  z-index: 20;
}

.cms-product2 {
  position: absolute;
  left: 370px;
  z-index: 10;
}


.cms-product3 {
  position: absolute;
  left: 724px;
  z-index: 1;
}

.cms-product-container {
  height: 278px;
}


.cms-product-container a:hover {
  color: #007bff;
  text-decoration: none;
}