Baldosa bento punteada

Baldosa bento punteada: tarjeta en CSS. Copia las reglas, o el prompt que reproduce el resultado.

bentofeaturepatterndotslight

Build

Rebuilds in under a second

Save a file and the page is already there. No spinner to wait for.

CSS
.card-043 {
  width: 300px;
  padding: 18px;
  background: #fafafa;
  border: 1px solid #e4e4e7;
  border-radius: 20px;
  font-family: system-ui,sans-serif;
  color: #18181b
}
.card-043__viz {
  position: relative;
  height: 140px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: radial-gradient(#d4d4d8 1.2px,transparent 1.3px) 0 0/14px 14px,#fff;
  border: 1px solid #e4e4e7;
  overflow: hidden
}
.card-043__viz span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  padding: 8px 16px;
  border-radius: 999px;
  background: #18181b;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 0 0 8px rgba(24,24,27,.08),0 0 0 16px rgba(24,24,27,.04);
  transition: box-shadow .3s
}
.card-043:hover .card-043__viz span {
  box-shadow: 0 0 0 12px rgba(24,24,27,.1),0 0 0 24px rgba(24,24,27,.05)
}
.card-043 h3 {
  margin: 0 0 6px;
  font-size: 17px
}
.card-043 p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #71717a
}
HTML
<article class="card-043">
  <div class="card-043__viz"><span>Build</span></div>
  <h3>Rebuilds in under a second</h3>
  <p>Save a file and the page is already there. No spinner to wait for.</p>
</article>
Prompt

Crea una baldosa de característica estilo bento de 300px: fondo #fafafa, borde 1px #e4e4e7, radio 20px, padding 18px. Arriba: un panel visual de 140px con un patrón de cuadrícula de puntos (puntos radial-gradient #d4d4d8 con separación 14px sobre blanco, radio 12px) y una píldora "Build" con dos anillos translúcidos concéntricos vía box-shadow (8px y 16px, rgba(24,24,27,.08/.04)) que se ensanchan en hover. Debajo: título 17px #18181b y texto 14px #71717a.