/* Text Elements */

h1.heading-1 {
  text-align: center;
}

p.paragraph.paragraph-3 {
  text-align: center;
}

p.paragraph.paragraph-5 {
  text-align: center;
}

p.paragraph.paragraph-6 {
  text-align: center;
}

p.paragraph span.paragraph-text-7 {
  color: #fff;
  font-style: italic;
  font-size: 1.125rem;
}

p.paragraph span.paragraph-text-8 {
  font-style: italic;
  font-size: 1.125rem;
}

p.paragraph span.paragraph-text-10 {
  color: #fff;
  font-style: italic;
  font-size: 1.125rem;
}

p.paragraph span.paragraph-text-6 {
  font-style: italic;
  font-size: 1.125rem;
}

p.paragraph span.paragraph-text-11 {
  color: #fff;
  font-style: italic;
  font-size: 1.125rem;
}

p.paragraph span.paragraph-text-9 {
  font-style: italic;
  font-size: 1.125rem;
}

p.paragraph.paragraph-1 {
  text-align: center;
}

p.paragraph.paragraph-2 {
  text-align: center;
}

p.paragraph.paragraph-9 {
  text-align: center;
}

p.paragraph.paragraph-7 {
  text-align: center;
}

p.paragraph.paragraph-10 {
  text-align: center;
}

p.paragraph.paragraph-4 {
  text-align: center;
}

/* Interaction Elements */

a.link-button.alert.button {
  background-color: #ccc;
  color: #000;
}

/* Layout Elements */

body.grid-1 {
  background-color: #ccc;
}

.container.column-1.column-type {
  position: static;
  display: grid;
  float: left;
  -webkit-column-fill: auto;
     -moz-column-fill: auto;
          column-fill: auto;

  align-self: center;
  justify-self: center;
}

.container.container-3 {
  display: grid;

  grid-template-columns: repeat(3 , auto);
  grid-template-rows: repeat(2 , auto);
  grid-row-gap: 7px;
  grid-column-gap: 7px;
}

.container.container-9 {
  padding-top: 25px;
  width: 110px;
  height: 110px;
  border-width: .0625rem;
  border-style: solid;
  border-top-left-radius: 30px;
  border-bottom-right-radius: 30px;
  background-color: #000;
}

.container.container-7 {
  padding-top: 35px;
  width: 110px;
  height: 110px;
  border: .0625rem solid #fff;
  border-top-left-radius: 30px;
  border-bottom-right-radius: 30px;
  background-color: #fff;
}

.container.container-4 {
  padding-top: 10px;
  width: 110px;
  height: 110px;
  border-width: .0625rem;
  border-style: solid;
  border-top-left-radius: 30px;
  border-bottom-right-radius: 30px;
  background-color: #000;
}

.container.container-8 {
  padding-top: 35px;
  width: 110px;
  height: 110px;
  border: .0625rem solid #fff;
  border-top-left-radius: 30px;
  border-bottom-right-radius: 30px;
  background-color: #fff;
}

.container.container-5 {
  padding-top: 25px;
  width: 110px;
  height: 110px;
  border-width: .0625rem;
  border-style: solid;
  border-top-left-radius: 30px;
  border-bottom-right-radius: 30px;
  background-color: #000;
}

.container.container-6 {
  padding-top: 35px;
  width: 110px;
  height: 110px;
  border: .0625rem solid #fff;
  border-top-left-radius: 30px;
  border-bottom-right-radius: 30px;
  background-color: #fff;
}

div.responsive-picture.picture-1 {
  opacity: .45;
}

@media screen and (min-width: 40rem) {
  /* Text Elements */

  h1.heading-1 {
    text-align: center;
  }

  p.paragraph.paragraph-3 {
    text-align: center;
  }

  p.paragraph.paragraph-5 {
    text-align: center;
  }

  p.paragraph.paragraph-6 {
    text-align: center;
  }

  p.paragraph.paragraph-1 {
    padding-top: 55px;
    text-align: center;
  }

  p.paragraph.paragraph-2 {
    padding-top: 55px;
    text-align: center;
  }

  p.paragraph.paragraph-9 {
    padding-top: 45px;
    text-align: center;
  }

  p.paragraph.paragraph-7 {
    padding-top: 55px;
    text-align: center;
  }

  p.paragraph.paragraph-10 {
    padding-top: 45px;
    text-align: center;
  }

  p.paragraph.paragraph-4 {
    padding-top: 55px;
    text-align: center;
  }

  p.paragraph span.paragraph-text-7 {
    color: #fff;
    font-style: italic;
    font-size: 1.25rem;
  }

  p.paragraph span.paragraph-text-8 {
    font-style: italic;
    font-size: 1.25rem;
  }

  p.paragraph span.paragraph-text-11 {
    color: #fff;
    font-style: italic;
    font-size: 1.25rem;
  }

  p.paragraph span.paragraph-text-10 {
    color: #fbf5f5;
    font-style: italic;
    font-size: 1.25rem;
  }

  p.paragraph span.paragraph-text-9 {
    font-style: italic;
    font-size: 1.25rem;
  }

  p.paragraph span.paragraph-text-6 {
    font-style: italic;
    font-size: 1.25rem;
  }

  /* Interaction Elements */

  a.link-button.alert.button {
    background-color: #ccc;
    color: #000;
  }

  /* Layout Elements */

  body.grid-1 {
    background-color: #ccc;
  }

  .container.container-3 {
    display: grid;

    grid-template-columns: repeat(3 , auto);
    grid-template-rows: repeat(2 , auto);
    grid-row-gap: 6px;
    grid-column-gap: 6px;
  }

  .container.container-4 {
    margin-left: 50px;
    padding-top: 5px;
    width: 160px;
    height: 160px;
    border-width: .0625rem;
    border-style: solid;
    border-top-left-radius: 40px;
    border-bottom-right-radius: 40px;
    background-color: #000;
  }

  .container.container-6 {
    padding-top: 15px;
    width: 160px;
    height: 160px;
    border: .0625rem solid #fff;
    border-top-left-radius: 40px;
    border-bottom-right-radius: 40px;
    background-color: #fff;
  }

  .container.container-5 {
    padding-top: 5px;
    width: 160px;
    height: 160px;
    border-width: .0625rem;
    border-style: solid;
    border-top-left-radius: 40px;
    border-bottom-right-radius: 40px;
    background-color: #000;
  }

  .container.container-7 {
    margin-left: 50px;
    padding-top: 10px;
    width: 160px;
    height: 160px;
    border: .0625rem solid #fff;
    border-top-left-radius: 40px;
    border-bottom-right-radius: 40px;
    background-color: #fff;
  }

  .container.container-9 {
    margin-left: 50px;
    padding-top: 10px;
    width: 160px;
    height: 160px;
    border-width: .0625rem;
    border-style: solid;
    border-top-left-radius: 40px;
    border-bottom-right-radius: 40px;
    background-color: #000;
  }

  .container.container-8 {
    padding-top: 10px;
    width: 160px;
    height: 160px;
    border: .0625rem solid #fff;
    border-top-left-radius: 40px;
    border-bottom-right-radius: 40px;
    background-color: #fff;
  }

  div.responsive-picture.picture-1 {
    opacity: .45;
  }
}

@media screen and (min-width: 64rem) {
  /* Text Elements */

  h1.heading-1 {
    margin-top: 50px;
    text-align: center;
  }

  p.paragraph.paragraph-3 {
    margin-top: 20px;
    text-align: center;
  }

  p.paragraph.paragraph-5 {
    text-align: center;
  }

  p.paragraph.paragraph-6 {
    text-align: center;
  }

  p.paragraph.paragraph-8 {
    text-align: center;
  }

  p.paragraph.paragraph-1 {
    padding-top: 5px;
    text-align: center;
    text-decoration: none;
    white-space: normal;
  }

  p.paragraph.paragraph-2 {
    padding-top: 10px;
    text-align: center;
  }

  p.paragraph.paragraph-4 {
    padding-top: 10px;
    text-align: center;
  }

  p.paragraph.paragraph-7 {
    padding-top: 10px;
    text-align: center;
  }

  p.paragraph span.paragraph-text-6 {
    font-style: italic;
    font-size: 1.625rem;
  }

  p.paragraph span.paragraph-text-7 {
    color: #fff;
    font-style: italic;
    font-size: 1.625rem;
  }

  p.paragraph span.paragraph-text-8 {
    font-style: italic;
    font-size: 1.625rem;
  }

  p.paragraph span.paragraph-text-9 {
    font-style: italic;
    font-size: 1.625rem;
  }

  p.paragraph span.paragraph-text-10 {
    color: #fff;
    font-style: italic;
    font-size: 1.625rem;
  }

  p.paragraph.paragraph-9 {
    padding-top: 55px;
    text-align: center;
  }

  p.paragraph span.paragraph-text-11 {
    color: #fff;
    font-weight: 400;
    font-style: italic;
    font-size: 1.625rem;
  }

  p.paragraph.paragraph-10 {
    padding-top: 55px;
    padding-right: 1px;
    text-align: center;
  }

  /* Interaction Elements */

  a.link-button.button {
    background-color: #ccc;
    color: #000;
  }

  /* Layout Elements */

  body.grid-1 {
    background-color: #ccc;
    -webkit-filter: grayscale(.13) opacity(1);
            filter: grayscale(.13) opacity(1);
  }

  .container.column-1 {
    position: static;
    float: none;
    clear: none;
  }

  .container.container-3 {
    display: grid;

    grid-template-areas: 'Specials. Coupons. Black_1.' 'Bits_\'n\'_Pieces. Black_2. Deals.';
    grid-template-columns: repeat(3 , auto);
    grid-template-rows: repeat(2 , auto);
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    grid-auto-rows: 50fr;
    grid-auto-columns: 50fr;
  }

  .container.container-4 {
    padding-top: 5px;
    width: 200px;
    height: 200px;
    border: .0625rem solid #000;
    border-top-left-radius: 60px;
    border-bottom-right-radius: 60px;
    background-color: #000;
  }

  .container.container-5 {
    margin-left: -15px;
    padding-top: 5px;
    width: 200px;
    height: 200px;
    border-width: .0625rem;
    border-style: solid;
    border-top-left-radius: 60px;
    border-bottom-right-radius: 60px;
    background-color: #000;
  }

  .container.container-6 {
    margin-left: -59px;
    padding-top: 65px;
    padding-left: 0;
    width: 200px;
    height: 200px;
    border: .0625rem solid #fff;
    border-top-left-radius: 60px;
    border-bottom-right-radius: 60px;
    background-color: #fff;
  }

  .container.container-7 {
    margin-right: 0;
    margin-left: 81px;
    padding-top: 65px;
    width: 200px;
    height: 200px;
    border: .0625rem solid #fff;
    border-top-left-radius: 60px;
    border-bottom-right-radius: 60px;
    background-color: #fff;
  }

  .container.container-8 {
    margin-left: 55px;
    padding-top: 65px;
    width: 200px;
    height: 200px;
    border: .0625rem solid #fff;
    border-top-left-radius: 59px 60px;
    border-bottom-right-radius: 59px 60px;
    background-color: #fff;
  }

  .container.container-9 {
    display: block;
    margin-right: 0;
    margin-left: 115px;
    padding: 55px 0 0;
    min-width: 0;
    width: 200px;
    height: 200px;
    border-width: .0625rem;
    border-style: solid;
    border-top-left-radius: 60px;
    border-bottom-right-radius: 60px;
    background-color: #000;
  }

  div.responsive-picture.picture-1 {
    vertical-align: bottom;
    opacity: .45;
  }
}