@import '../styles/style.scss';

.react-page {
  background-color: #edeff4;
  padding-bottom: 4rem;

  // most MUI components have content box, which disturbs layouts
  // set border-box for react page
  // not so comfortable with !important, but currently no option
  & * {box-sizing: border-box !important;}

  &-header {
    @include flex(column, 0.5rem);
    padding: 1rem 1rem 1.5rem 2.25rem;
    background-color: #fff;
  }

  &-title {
    color: #26333f;
    font-size: 2rem;
    margin: 0;
  }

  &-content {
    margin: 0;
    padding: 1.5rem 2.25rem;
  }
}