.demo-live {
  min-height: 530px;
}

.demo-live > a {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 13px 15px;
  display: flex;
  justify-content: space-between;
  align-self: stretch;
  background: #20211e;
  color: #fff;
  font: 800 10px var(--sans);
}

.demo-live.electro > a {
  background: #d9ff63;
  color: #151613;
}

.demo-live-preview {
  position: relative;
  z-index: 1;
  height: 205px;
  margin: 24px 0 25px;
  overflow: hidden;
  border: 1px solid #0002;
  background: #eee;
}

.demo-live-preview i {
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: transform .35s;
}

.demo-live:hover .demo-live-preview i {
  transform: scale(1.035);
}

.demo-live-preview span {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 6px 8px;
  background: #f7f4ed;
  color: #171815;
  font: 7px var(--mono);
  letter-spacing: .04em;
}

.demo-live.boutique .demo-live-preview i {
  background-image: url('/assets/demo/boutique-products-preview.webp');
  background-image: image-set(url('/assets/demo/boutique-products-preview.avif') type('image/avif'), url('/assets/demo/boutique-products-preview.webp') type('image/webp'));
}
.demo-live.modern .demo-live-preview i {
  background-image: linear-gradient(90deg, rgba(0,0,0,.52), rgba(0,0,0,.03) 72%), url('/assets/demo/klea/hero.jpg');
}
.demo-live.electro .demo-live-preview i {
  background-image: url('/assets/demo/electro-products-preview.webp');
  background-image: image-set(url('/assets/demo/electro-products-preview.avif') type('image/avif'), url('/assets/demo/electro-products-preview.webp') type('image/webp'));
}
.demo-live.minimal .demo-live-preview i {
  background-image: url('/assets/demo/minimal-products-preview.webp');
  background-image: image-set(url('/assets/demo/minimal-products-preview.avif') type('image/avif'), url('/assets/demo/minimal-products-preview.webp') type('image/webp'));
}
.demo-live h2 { margin: 0 0 12px; }
.demo-live p { margin: 0 0 24px; }
.demo-live::after { display: none; }

.public-demos .member-main { padding-top: 1px; }
.public-demos .demos-welcome { padding-top: 96px; }
.public-demo-cta { align-items: center; }
.public-demo-cta > div > p:not(.eyebrow) {
  max-width: 560px;
  margin: 20px 0 0;
  color: #bfc1b8;
  font-size: 12px;
  line-height: 1.75;
}

@media (max-width: 860px) {
  .demo-live { min-height: 500px; }
  .demo-live-preview { height: 190px; }
  .public-demos .demos-welcome { padding-top: 62px; }
}