import React from 'react';
import Placeholder from '@theme/Placeholder';

export default function Stacks(props) {
  return (
    <div className="stack-xxl">
      <div className="stack-xs" style={{ backgroundColor: '#eee' }}>
        <Placeholder h="20" bg="pink" />
        <Placeholder h="20" bg="pink" />
        <Placeholder h="20" bg="pink" />
      </div>
      <div className="stack-s" style={{ backgroundColor: '#eee' }}>
        <Placeholder h="20" bg="pink" />
        <Placeholder h="20" bg="pink" />
        <Placeholder h="20" bg="pink" />
      </div>
      <div className="stack-m" style={{ backgroundColor: '#eee' }}>
        <Placeholder h="20" bg="pink" />
        <Placeholder h="20" bg="pink" />
        <Placeholder h="20" bg="pink" />
      </div>
      <div className="stack-l" style={{ backgroundColor: '#eee' }}>
        <Placeholder h="20" bg="pink" />
        <Placeholder h="20" bg="pink" />
        <Placeholder h="20" bg="pink" />
      </div>
      <div className="stack-xl" style={{ backgroundColor: '#eee' }}>
        <Placeholder h="20" bg="pink" />
        <Placeholder h="20" bg="pink" />
        <Placeholder h="20" bg="pink" />
      </div>
      <div className="stack-xxl" style={{ backgroundColor: '#eee' }}>
        <Placeholder h="20" bg="pink" />
        <Placeholder h="20" bg="pink" />
        <Placeholder h="20" bg="pink" />
      </div>
    </div>
  );
}