*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit; }

html {
  font-size: 62.5%; }
  @media screen and (max-width: 75em) {
    html {
      font-size: 56.25%; } }
  @media screen and (max-width: 56.25em) {
    html {
      font-size: 50%; } }

body {
  box-sizing: border-box; }
  @media screen and (max-width: 56.25em) {
    body {
      padding: 0; } }

.state {
  display: block;
  width: 100%; }
  .state__wrapper {
    width: 100%;
    border-radius: .5rem;
    box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.2);
    margin-bottom: 2rem; }
    .state__wrapper--unpublished {
      background-color: #ff3c35;
      border: 1px solid #400f0d; }
  .state__content {
    padding: 2rem;
    margin: 0; }
    .state__content--unpublished {
      color: #fff;
      text-shadow: 1px 2px 2px #400f0d;
      font-weight: 700; }