.smm-hero-scene {
  display: grid;
  place-items: center;
  min-height: 320px;
  perspective: none;
}
.smm-promo-panel {
  width: min(100%, 500px);
  padding: 17px;
  border: 1px solid rgba(255, 255, 255, .88);
  border-radius: 23px;
  background: #fff;
  color: #14161c;
  box-shadow: 0 28px 55px rgba(16, 19, 25, .28), 0 2px 0 rgba(255,255,255,.55) inset;
  transform: rotate(-2deg);
}
.smm-promo-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  padding: 0 3px 12px;
}
.smm-promo-top-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #1b202a;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .09em;
  white-space: nowrap;
}
.smm-promo-top-label i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #202630;
  box-shadow: 0 0 0 4px #f1f2f3;
}
.smm-promo-platforms { display: inline-flex; flex: none; align-items: center; padding-left: 6px; }
.smm-promo-platforms img {
  width: 28px;
  height: 28px;
  margin-left: -6px;
  padding: 2px;
  border: 2px solid #fff;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 2px 7px rgba(17, 19, 23, .14);
}
.smm-promo-post {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 75px;
  padding: 9px 13px;
  border: 1px solid #edeeef;
  border-radius: 14px;
  background: linear-gradient(110deg, #f8f8f9, #fff);
}
.smm-promo-post-art {
  display: grid;
  place-items: center;
  flex: none;
  width: 53px;
  height: 53px;
  border-radius: 11px;
  background: linear-gradient(135deg, #202630, #1a1f28 55%, #12161c);
  box-shadow: 0 6px 12px rgba(26, 32, 41, .2);
  color: #fff;
}
.smm-promo-post-art svg { width: 23px; height: 23px; }
.smm-promo-post-copy { display: grid; gap: 4px; min-width: 0; }
.smm-promo-post-copy strong { font-size: 16px; line-height: 1.1; font-weight: 850; }
.smm-promo-post-copy small { color: #8190a3; font-size: 10px; font-weight: 650; }
.smm-promo-post-arrow { margin-left: auto; color: #1b212a; font-size: 24px; font-weight: 800; }
.smm-promo-metrics { display: grid; gap: 7px; margin-top: 11px; }
.smm-promo-metric {
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr) 58px 21px;
  align-items: center;
  gap: 10px;
  min-height: 45px;
  padding: 6px 11px;
  border: 1px solid #f0f1f2;
  border-radius: 11px;
  background: #f8f8f9;
}
.smm-promo-metric-icon {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 8px;
  background: #f7f7f8;
  color: #1b212a;
}
.smm-promo-metric-icon svg { width: 18px; height: 18px; }
.smm-promo-metric strong { font-size: 12px; font-weight: 800; white-space: nowrap; }
.smm-promo-metric b { color: #20a169; font-size: 20px; line-height: 1; }
.smm-promo-trend { display: flex; align-items: end; justify-content: flex-end; gap: 4px; height: 19px; }
.smm-promo-trend i { width: 8px; height: 7px; border-radius: 3px 3px 1px 1px; background: #b2e6e3; }
.smm-promo-trend i:nth-child(2) { height: 10px; background: #92ddd8; }
.smm-promo-trend i:nth-child(3) { height: 14px; background: #202630; }
.smm-promo-trend i:nth-child(4) { height: 19px; background: #1b212a; }
@media (max-width: 620px) {
  .smm-hero-scene { min-height: 0; height: auto; margin: 23px 0 0; transform: none; }
  .smm-promo-panel { width: 100%; padding: 13px; border-radius: 18px; transform: rotate(-1deg); }
  .smm-promo-top { padding-bottom: 9px; }
  .smm-promo-post { min-height: 62px; padding: 7px 10px; }
  .smm-promo-post-art { width: 45px; height: 45px; }
  .smm-promo-post-copy strong { font-size: 13px; }
  .smm-promo-metrics { gap: 6px; margin-top: 8px; }
  .smm-promo-metric { min-height: 38px; padding: 4px 8px; }
}
@media (max-width: 360px) {
  .smm-promo-top-label { font-size: 7px; letter-spacing: .05em; }
  .smm-promo-platforms img { width: 23px; height: 23px; }
  .smm-promo-metric { grid-template-columns: 26px minmax(0, 1fr) 40px 15px; gap: 6px; }
  .smm-promo-metric-icon { width: 26px; height: 26px; }
  .smm-promo-metric strong { font-size: 10px; }
  .smm-promo-trend { gap: 2px; }
  .smm-promo-trend i { width: 6px; }
  .smm-promo-metric b { font-size: 17px; }
}