.sample-preview-section{
  padding:88px 0 96px;
  background:#f6f8f7;
}
.sample-preview-section .section-title{
  max-width:860px;
  margin:0 auto;
  text-align:center;
}
.sample-preview-section .section-title h2{
  margin-top:10px;
  line-height:1.02;
}
.sample-preview-section .section-title p{
  max-width:760px;
  margin:18px auto 0;
  font-size:17px;
  line-height:1.65;
}
.sample-preview-section .sample-preview-card{
  position:static;
  display:block;
  width:min(100%,900px);
  max-width:900px;
  margin:42px auto 0;
  padding:28px;
  transform:none !important;
  transform-origin:center;
  color:#fff;
  background:#173447;
  border:1px solid rgba(255,255,255,.18);
  border-radius:24px;
  box-shadow:0 24px 55px rgba(7,31,53,.16);
}
.sample-preview-section .sample-preview-card .demo-head b,
.sample-preview-section .sample-preview-card .demo-query b,
.sample-preview-section .sample-preview-card .demo-target div b,
.sample-preview-section .sample-preview-card .demo-foot b{
  color:#fff;
}
.sample-preview-section .sample-preview-card .demo-query small,
.sample-preview-section .sample-preview-card .demo-target div small,
.sample-preview-section .sample-preview-card .demo-foot span{
  color:rgba(255,255,255,.72);
}
.sample-preview-section .sample-preview-card .demo-target{
  grid-template-columns:44px minmax(0,1fr) auto;
  padding:18px;
  margin-top:12px;
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.14);
  border-radius:16px;
}
.sample-preview-section .sample-preview-card .demo-target div b{
  font-size:16px;
  line-height:1.25;
}
.sample-preview-section .sample-preview-card .demo-target div small{
  margin-top:6px;
  font-size:12px;
  line-height:1.45;
}
.sample-preview-section .sample-preview-card .demo-target>strong{
  font-size:12px;
}
.sample-preview-section .sample-preview-card .demo-target>span{
  font-size:12px;
  padding:8px 11px;
}
.sample-preview-section .sample-preview-card .demo-foot{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.13);
  font-size:12px;
  line-height:1.45;
}
@media(max-width:700px){
  .sample-preview-section{padding:60px 0 68px}
  .sample-preview-section .section-title p{font-size:15px}
  .sample-preview-section .sample-preview-card{margin-top:30px;padding:20px 16px;border-radius:18px}
  .sample-preview-section .sample-preview-card .demo-target{grid-template-columns:30px minmax(0,1fr);padding:15px 12px}
  .sample-preview-section .sample-preview-card .demo-target>span{grid-column:2;justify-self:start}
  .sample-preview-section .sample-preview-card .demo-target div b{font-size:14px}
  .sample-preview-section .sample-preview-card .demo-target div small{font-size:11px}
  .sample-preview-section .sample-preview-card .demo-foot{display:block}
  .sample-preview-section .sample-preview-card .demo-foot b{display:block;margin-top:6px}
}