.cf-grid {
  --cf-size: 220px;
  --cf-edge: 28px;
  --cf-gap: 2px;
  --cf-pad: 10px;
  --cf-radius: 18px;

  display: grid;
  grid-template-columns: var(--cf-edge) repeat(3, 1fr) var(--cf-edge);
  grid-template-rows: var(--cf-edge) repeat(3, 1fr) var(--cf-edge);
  gap: var(--cf-gap);
  border-radius: var(--cf-radius);
  padding: var(--cf-pad);
  width: var(--cf-size);
  height: var(--cf-size);
  user-select: none;
  box-sizing: border-box;
}

.cf-edge {
  border-radius: 8px;
}

.cf-inner {
  border-radius: 6px;
  cursor: default;
  pointer-events: none;
}