.technical-hero .slots-hero-art {
  background-image: url('assets/technical-hero.webp');
  background-position: right center
}

.technical-hero:after {
  background: linear-gradient(90deg, #090c25f5, #110a28ed 30%, #160b2c60 65%, transparent)
}

.technical-hero .slots-hero-copy {
  max-width: 920px
}

.technical-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: stretch;
  margin-bottom: 14px
}

.technical-pair>.panel {
  height: 100%;
  min-width: 0
}

.connection-scenarios {
  display: grid;
  gap: 11px
}

.connection-scenarios article {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
  padding: 14px;
  border: 1px solid #674580;
  border-radius: 11px;
  background: linear-gradient(130deg, #34213f, #13213a)
}

.scenario-problem {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0
}

.scenario-problem .ui-icon {
  width: 33px;
  height: 33px;
  flex: 0 0 33px
}

.technical-content h3 {
  font-size: 14px;
  line-height: 1.5
}

.scenario-problem h3 {
  margin: 0 0 8px;
  color: #ecc3ff
}

.scenario-problem p,
.scenario-action p {
  margin: 0;
  color: #dce3ef
}

.scenario-action {
  border-left: 1px solid #69527a;
  padding-left: 13px
}

.performance-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column
}

.performance-areas {
  display: grid;
  gap: 13px
}

.performance-areas article {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 15px;
  border: 1px solid #6c4a83;
  border-radius: 11px;
  background: linear-gradient(130deg, #34223f, #17223b)
}

.performance-areas .ui-icon {
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  padding: 7px;
  border: 1px solid #9865b8;
  border-radius: 10px;
  background: linear-gradient(135deg, #683592, #28234c)
}

.performance-areas h3 {
  margin: 0 0 8px;
  color: #f1c5ff
}

.performance-areas p {
  margin: 7px 0;
  color: #d7e1ed
}

.performance-action {
  border-top: 1px solid #6c527580;
  margin-top: 10px;
  padding-top: 7px
}

.performance-art {
  flex: 1;
  min-height: 145px;
  margin: 15px 0 0;
  background: url('assets/technical-hero.webp') right center/cover;
  opacity: .28;
  border-radius: 13px;
  mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent);
  pointer-events: none
}

.technical-content .issue-problem>.ui-icon {
  border-color: #9d64ba;
  background: linear-gradient(130deg, #793aa1, #302250)
}

@media(max-width:1350px) {
  .technical-pair {
    grid-template-columns: 1fr
  }

  .performance-art {
    flex: none;
    min-height: 0;
    height: 150px
  }
}

@media(max-width:680px) {
  .technical-hero .slots-hero-art {
    background-position: 70% center
  }

  .technical-hero:after {
    background: linear-gradient(90deg, #090c25ef, #110a28c4 70%, #160b2c85)
  }

  .connection-scenarios article {
    grid-template-columns: 1fr;
    gap: 11px;
    padding: 13px
  }

  .scenario-action {
    border-left: 0;
    border-top: 1px solid #69527a;
    padding: 11px 0 0
  }

  .performance-areas article {
    padding: 13px;
    gap: 11px
  }

  .performance-areas .ui-icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    padding: 6px
  }
}