/*
*, *:before, *:after {
  box-sizing: border-box; }
  */
*:before, *:after {
  box-sizing: border-box; }

body {
  /*padding: 0.5rem;*/ }

main {
  max-width: 500px;
  margin: 0 auto; }

article {
  margin: 1rem 0; }

@supports (display: grid) {
  main {
    max-width: none;
    margin: 0; }
  article {
    margin: 0; }
  main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 1rem; } }

article {
  display: flex;
  flex-flow: column; }

article > img {
  order: -1;
  align-self: center; }

article {
  /*padding: 2rem;*/ }

article > h1 {
  margin: 1rem 1rem 0;
  text-transform:uppercase;
  font-weight:bold; }

article > ul {
  margin: 0 0 1rem; }

article > p {
  margin: 0.25em 1rem 1rem; }

article > a {
  color: #999999 }

main {
  font-family: Avenir, Roboto, Helvetica, san-serif; }

article {
  border: 1px solid #DCDCDC;
  border-radius: 1rem; }

article.filler {
  border: 0px solid #DCDCDC;
  border-radius: 1rem;
  background:none; }
article > button {
  margin-top: auto;
  background: teal;
  color: white;
  padding: 0.5rem;
  border: none;
  border-radius: 1rem;
  font-size: 1.2rem; }