@layer blocks {
  .features-grid {
    border: var(--border-width-thin) var(--border-style) var(--color-border);
    border-radius: var(--radius-l);
    overflow: hidden;
    --grid-gap: 0;
    --grid-min-size: 19rem;
  }

  .feature-cell {
    padding: var(--space-m);
    border-bottom: var(--border-width-thin) var(--border-style) var(--color-border);
    border-right: var(--border-width-thin) var(--border-style) var(--color-border);
    transition: background 0.2s;
    --flow-space: var(--space-xs);
  }

  .feature-cell:hover {
    background: var(--paper-2);
  }

  @media (max-width: 860px) {
    .feature-cell {
      border-right: none;
    }
  }

  .feature-cell[data-layout="with-screenshot"] {
    grid-column: 1 / -1;
    border-right: none;
    --ratio-grid-columns: 1fr 1.4fr;
    --ratio-grid-gap: var(--space-l);
    --ratio-grid-align: center;
  }
}