.tiansheng_power_solutions {
  padding: 88px 0 92px;
  background: #ffffff;
}

.tiansheng-power-solutions-head {
  margin-bottom: 58px;
}

.tiansheng-power-solutions-title {
  max-width: 700px;
  margin: 0;
  color: #262626;
  font-family: var(--tiansheng-font-title, var(--title-font-family));
  font-size: max(30px, 3.125rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0;
}

.tiansheng-power-solutions-desc {
  max-width: 1064px;
  margin: 30px 0 0;
  color: #333333;
  font-family: var(--tiansheng-font-ui, var(--font-family));
  font-size: max(12px, 0.875rem);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
}

.tiansheng-power-solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px 24px;
}

.tiansheng-power-solution-card {
  --tiansheng-power-shape-small: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 458 376'%3E%3Cpath d='M457.15 289C457.15 300.046 448.196 309 437.15 309H399.594C388.548 309 379.594 317.954 379.594 329V356C379.594 367.046 370.639 376 359.594 376H19.5937C8.54805 376 -0.40625 367.046 -0.40625 356V20C-0.40625 8.9543 8.54806 0 19.5938 0H437.15C448.196 0 457.15 8.95431 457.15 20V289Z' fill='black'/%3E%3C/svg%3E");
  --tiansheng-power-shape-large: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 948 376'%3E%3Cpath d='M918 0C934.569 0 948 13.4315 948 30V279C948 295.569 934.569 309 918 309H890C878.954 309 870 317.954 870 329V346C870 362.569 856.569 376 840 376H30C13.4315 376 0 362.569 0 346V30C0 13.4315 13.4315 0 30 0H918Z' fill='black'/%3E%3C/svg%3E");
  --tiansheng-power-shape: var(--tiansheng-power-shape-small);
  --tiansheng-power-card-bg: #eef2fb;
  --tiansheng-power-copy-left: 20px;
  --tiansheng-power-copy-right: 76px;
  --tiansheng-power-copy-bottom: 15px;
  --tiansheng-power-media-padding-x: 34px;
  --tiansheng-power-media-padding-top: 34px;
  --tiansheng-power-media-padding-bottom: 72px;
  --tiansheng-power-arrow-width: 70px;
  --tiansheng-power-arrow-height: 60px;
  --tiansheng-power-arrow-radius: 16px;
  --tiansheng-power-arrow-line-width: 21px;
  --tiansheng-power-arrow-line-height: 2px;
  --tiansheng-power-arrow-head-size: 10px;
  --tiansheng-power-arrow-head-offset: 6px;
  min-width: 0;
}

.tiansheng-power-solution-card.is-large {
  --tiansheng-power-shape: var(--tiansheng-power-shape-large);
  grid-column: span 2;
}

.tiansheng-power-solution-link {
  position: relative;
  display: block;
  width: 100%;
  color: inherit;
  text-decoration: none;
}

.tiansheng-power-solution-shell {
  background-image: url('https://okki-shop.oss-accelerate.aliyuncs.com/category/500931/5086/b418057db53680a6124c1797560e54da/image_643.png');
  background-size: cover;
  background-position: center;
  position: relative;
  width: 100%;
  aspect-ratio: 458 / 376;
  overflow: hidden;
  /* background: var(--tiansheng-power-card-bg); */
  border-radius: 20px;
  -webkit-mask: var(--tiansheng-power-shape) center / 100% 100% no-repeat;
  mask: var(--tiansheng-power-shape) center / 100% 100% no-repeat;
}

.tiansheng-power-solution-card.is-large .tiansheng-power-solution-shell {
  aspect-ratio: 948 / 376;
}

.tiansheng-power-solution-media {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--tiansheng-power-media-padding-top) var(--tiansheng-power-media-padding-x) var(--tiansheng-power-media-padding-bottom);
}

.tiansheng-power-solution-media img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  transition: opacity 0.28s ease;
}

.tiansheng-power-solution-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: transparent;
  transition: background 0.28s ease;
}

.tiansheng-power-solution-copy {
  position: absolute;
  right: var(--tiansheng-power-copy-right);
  bottom: var(--tiansheng-power-copy-bottom);
  left: var(--tiansheng-power-copy-left);
  z-index: 3;
  min-height: 28px;
}

.tiansheng-power-solution-meta {
  position: absolute;
  bottom: 50px;
  left: 0;
  display: none;
  width: min(100%, 286px);
  margin: 0;
  color: #ffffff;
  font-family: var(--tiansheng-font-ui, var(--font-family));
  font-size: max(12px, 1.125rem);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
}

.tiansheng-power-solution-title {
  max-width: 100%;
  margin: 0;
  color: #333333;
  font-family: var(--tiansheng-font-title, var(--title-font-family));
  font-size: max(12px, 1.125rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  transition: color 0.28s ease;
}

.tiansheng-power-solution-arrow {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
  width: var(--tiansheng-power-arrow-width);
  height: var(--tiansheng-power-arrow-height);
  border-radius: var(--tiansheng-power-arrow-radius);
  background: #d9d9d9;
  transition: background 0.28s ease;
}

.tiansheng-power-solution-arrow::before,
.tiansheng-power-solution-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: #333333;
  transform: translate(-50%, -50%);
  transition: background 0.28s ease, border-color 0.28s ease;
}

.tiansheng-power-solution-arrow::before {
  width: var(--tiansheng-power-arrow-line-width);
  height: var(--tiansheng-power-arrow-line-height);
}

.tiansheng-power-solution-arrow::after {
  width: var(--tiansheng-power-arrow-head-size);
  height: var(--tiansheng-power-arrow-head-size);
  margin-left: var(--tiansheng-power-arrow-head-offset);
  border-top: 2px solid #333333;
  border-right: 2px solid #333333;
  background: transparent;
  transform: translate(-50%, -50%) rotate(45deg);
}

.tiansheng-power-solution-card:hover .tiansheng-power-solution-overlay,
.tiansheng-power-solution-card:focus-within .tiansheng-power-solution-overlay {
  background: linear-gradient(180deg, #6b9cf0 0%, #2f69d8 100%);
}

.tiansheng-power-solution-card:hover .tiansheng-power-solution-media img,
.tiansheng-power-solution-card:focus-within .tiansheng-power-solution-media img {
  opacity: 0.2;
}

.tiansheng-power-solution-card:hover .tiansheng-power-solution-title,
.tiansheng-power-solution-card:focus-within .tiansheng-power-solution-title {
  color: #ffffff;
}

.tiansheng-power-solution-card:hover .tiansheng-power-solution-meta,
.tiansheng-power-solution-card:focus-within .tiansheng-power-solution-meta {
  display: block;
}

.tiansheng-power-solution-card:hover .tiansheng-power-solution-arrow,
.tiansheng-power-solution-card:focus-within .tiansheng-power-solution-arrow {
  background: #3980f4;
}

.tiansheng-power-solution-card:hover .tiansheng-power-solution-arrow::before,
.tiansheng-power-solution-card:focus-within .tiansheng-power-solution-arrow::before {
  background: #ffffff;
}

.tiansheng-power-solution-card:hover .tiansheng-power-solution-arrow::after,
.tiansheng-power-solution-card:focus-within .tiansheng-power-solution-arrow::after {
  border-top-color: #ffffff;
  border-right-color: #ffffff;
}

@media screen and (max-width: 1500px) {
.tiansheng-power-solution-card {
  --tiansheng-power-arrow-width: 56px;
  --tiansheng-power-arrow-height: 48px;
}
}

@media screen and (max-width: 1200px) {
  .tiansheng_power_solutions {
    padding: 76px 0 84px;
  }

  .tiansheng-power-solutions-title {
    max-width: 600px;
    font-size: max(28px, 2.75rem);
  }

  .tiansheng-power-solutions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
   .tiansheng-power-solution-card {
    --tiansheng-power-arrow-width: 66px;
    --tiansheng-power-arrow-height: 54px;
  }
}

@media screen and (max-width: 767px) {
  .tiansheng_power_solutions {
    padding: 58px 0 68px;
  }

  .tiansheng-power-solutions-head {
    margin-bottom: 38px;
  }

  .tiansheng-power-solutions-title {
    max-width: 100%;
    font-size: max(28px, 2rem);
    line-height: 1.18;
  }

  .tiansheng-power-solutions-desc {
    margin-top: 18px;
    font-size: max(12px, 0.875rem);
    line-height: 1.5;
  }

  .tiansheng-power-solutions-grid-wrap {
    width: auto;
    height: auto;
    max-width: none;
    overflow: visible;
  }

  .tiansheng-power-solutions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .tiansheng-power-solution-card {
    width: 100%;
    max-width: none;
    margin: 0;
    --tiansheng-power-copy-left: 10px;
    --tiansheng-power-copy-right: 44px;
    --tiansheng-power-copy-bottom: 9px;
    --tiansheng-power-media-padding-x: 12px;
    --tiansheng-power-media-padding-top: 16px;
    --tiansheng-power-media-padding-bottom: 46px;
    --tiansheng-power-arrow-width: 36px;
    --tiansheng-power-arrow-height: 32px;
    --tiansheng-power-arrow-radius: 10px;
    --tiansheng-power-arrow-line-width: 14px;
    --tiansheng-power-arrow-line-height: 2px;
    --tiansheng-power-arrow-head-size: 7px;
    --tiansheng-power-arrow-head-offset: 4px;
  }

  .tiansheng-power-solution-card.is-large {
    --tiansheng-power-shape: var(--tiansheng-power-shape-small);
    grid-column: auto;
  }

  .tiansheng-power-solution-card.is-large .tiansheng-power-solution-shell {
    aspect-ratio: 458 / 376;
  }

  .tiansheng-power-solution-shell {
    border-radius: 14px;
  }

  .tiansheng-power-solution-copy {
    min-height: 34px;
  }

  .tiansheng-power-solution-title {
    font-size: max(12px, 0.75rem);
    line-height: 1.25;
  }

  .tiansheng-power-solution-meta {
    bottom: 38px;
    font-size: max(12px, 0.75rem);
    line-height: 1.3;
  }
}