.products-readable-hero {
  position: relative;
  isolation: isolate;
}

.products-readable-hero:after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60%;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(247, 250, 252, 0) 0%, rgba(247, 250, 252, .22) 12%, rgba(247, 250, 252, .78) 25%, #f7fafc 40%, #f7fafc 100%);
}

.products-readable-copy {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: clamp(5vw, 11.2vw, 215px);
  width: min(390px, 31vw);
  transform: translateY(-50%);
}

.products-readable-copy > span {
  display: block;
  margin-bottom: 18px;
  color: #4f8ecb;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .13em;
}

.products-readable-copy h1 {
  margin: 0;
  color: #102c51;
  font-size: clamp(34px, 3.35vw, 64px);
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: 1.1;
}

.products-readable-copy p {
  margin: 18px 0 0;
  color: #253b54;
  font-size: clamp(17px, 1.5vw, 27px);
  font-weight: 600;
  line-height: 1.45;
}

.products-readable-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 21px;
}

.products-readable-tags b {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 13px;
  color: #49667f;
  border: 1px solid #b7c9d9;
  border-radius: 6px;
  background: rgba(255, 255, 255, .78);
  font-size: 12px;
  font-weight: 700;
}

.products-readable-button {
  display: inline-flex;
  min-width: 158px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 26px;
  padding: 0 20px;
  color: #fff;
  border: 0;
  border-radius: 7px;
  background: linear-gradient(110deg, #075fc4, #1588db);
  box-shadow: 0 10px 20px rgba(20, 105, 185, .2);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.products-readable-button i {
  font-size: 19px;
  font-style: normal;
  transition: transform .25s ease;
}

.products-readable-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 28px rgba(20, 105, 185, .28);
  filter: saturate(1.08);
}

.products-readable-button:hover i { transform: translate(3px, -2px); }
.products-readable-button:active { transform: translateY(0); }

@media (max-width: 760px) {
  .products-readable-hero { min-height: 510px; }
  .products-readable-hero > img { height: 510px; object-fit: cover; object-position: 30% center; }
  .products-readable-hero:after { width: 64%; background: linear-gradient(90deg, rgba(247, 250, 252, 0) 0%, rgba(247, 250, 252, .38) 12%, #f7fafc 36%, #f7fafc 100%); }
  .products-readable-copy { right: 5vw; width: 48vw; }
  .products-readable-copy > span { margin-bottom: 11px; font-size: 9px; }
  .products-readable-copy h1 { font-size: 29px; }
  .products-readable-copy p { margin-top: 10px; font-size: 15px; }
  .products-readable-tags { gap: 6px; margin-top: 13px; }
  .products-readable-tags b { min-height: 25px; padding: 0 8px; font-size: 10px; }
  .products-readable-button { min-width: 126px; min-height: 39px; gap: 10px; margin-top: 17px; padding: 0 13px; font-size: 12px; }
  .products-readable-button i { font-size: 16px; }
}