.template-protest {
  padding: var(--s40) var(--s20);
  background-color: #161616;
  color: white;

  @media screen and (min-width: 1000px) {
    padding: var(--s80) var(--s40);
  }

  h1., h2, h3, p {
    color: white;
  }

  &.js-enabled {
    :before {
      content: none;
    }
  }

  header,
  footer {
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }

  header {
    margin-bottom: var(--s64);

    img {
      margin-bottom: 40px;
    }

    h1 {
      font-size: var(--s64);
    }
  }

  footer {
    margin-top: var(--s64);
  }

  .graphic-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: var(--s20);
    grid-row-gap: var(--s40);

    @media screen and (min-width: 1000px) {
      grid-template-columns: repeat(3, 1fr);
      grid-column-gap: var(--s40);
      grid-row-gap: var(--s80);
    }

    li {
      text-align: center;
      /*display: grid;*/
      /*grid-row-gap: var(--s10);*/
      /*grid-template-columns: repeat(1, 1fr);*/

      @media screen and (min-width: 1000px) {

      }

      img {
        margin-bottom: var(--s10);
      }

      p {
        margin-bottom: var(--s4);
      }
    }
  }

  @media screen and (min-width: 600px) {

    main {
      display: block;
    }
  }


}