export function ShadowLiftButton() {
  return (
    <div
      className="p-12 grid place-items-center"
      style={{ background: "#f6f3ec" }}
    >
      <style>{`
        .lift-btn {
          background: #fffdf7;
          color: #1a1a1a;
          border: 1px solid #1a1a1a;
          font-family: var(--font-instrument-serif), serif;
          letter-spacing: 0.01em;
          box-shadow:
            0 1px 0 #1a1a1a,
            0 2px 0 #1a1a1a;
          transition:
            transform .25s cubic-bezier(.2,.7,.2,1),
            box-shadow .25s cubic-bezier(.2,.7,.2,1);
        }
        .lift-btn:hover {
          transform: translate(-3px, -3px);
          box-shadow:
            0 1px 0 #1a1a1a,
            0 2px 0 #1a1a1a,
            4px 6px 0 #1a1a1a,
            4px 6px 18px -6px rgba(0,0,0,0.35);
        }
        .lift-btn:active {
          transform: translate(0, 0);
          box-shadow: 0 1px 0 #1a1a1a;
        }
      `}</style>
      <button
        type="button"
        className="lift-btn px-8 py-3 rounded-md text-[18px] italic"
      >
        Compose a letter
      </button>
    </div>
  );
}
Editorial Lift Button
