@import url("https://fonts.googleapis.com/css?family=Noto+Sans");
.main_product {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-gap: 1.5vw;
  grid-template-areas: "product-breadcrumbs product-breadcrumbs" "product-images-area product-info-area" "product-other-area product-other-area";
  grid-template-rows: auto 1fr auto;
  max-width: 1200px;
  margin: 0 auto;
}

.product__breadcrumbs {
  grid-area: product-breadcrumbs;
  background-color: black;
  color: white;
  padding-bottom: 0.75vw;
  margin-bottom: -1.5vw;
}

.breadcrumbs__link {
  color: white;
}

.product__images-area {
  grid-area: product-images-area;
}

.product__info-area {
  grid-area: product-info-area;
}

.product__other-area {
  grid-area: product-other-area;
}

.js-product__main-image {
  width: 100%;
}

.product__images-list {
  display: flex;
  list-style-type: none;
  padding: 0;
}

.product__images-list-item {
  cursor: pointer;
  padding: 0;
  margin: 0;
}

.js-product__images-list-image {
  background-color: black;
  opacity: 0.6;
}

.js-product__images-list-image:hover, .js-product__images-list-image_active {
  opacity: 1;
}

.product-price {
  margin: 0 10px 10px 0;
  font-size: 1.5vw;
}

@media (max-width: 700px) {
  .main_product {
    grid-template-columns: 1fr;
    grid-template-areas: "product-breadcrumbs" "product-images-area" "product-info-area" "product-other-area";
  }
  .product-price {
    font-size: 6vw;
  }
  .product__breadcrumbs {
    font-size: 4vw;
  }
}