.article {
  padding: 0 1rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  -webkit-column-gap: 1rem;
     -moz-column-gap: 1rem;
          column-gap: 1rem;
  row-gap: 1.5rem;
}
.article:first-child {
  padding-top: 6rem;
}
@media only screen and (min-width: 768px) {
  .article {
    padding: 0 1.5rem;
    grid-template-columns: repeat(16, 1fr);
    -webkit-column-gap: 1rem;
       -moz-column-gap: 1rem;
            column-gap: 1rem;
    align-items: start;
  }
  .article:first-child {
    padding-top: 3rem;
  }
}
.article__media {
  grid-column: span 4;
  grid-row: 2;
}
@media only screen and (min-width: 768px) {
  .article__media {
    grid-column: 1/span 7;
    grid-row: 1;
    position: relative;
    position: -webkit-sticky;
    position: sticky;
    top: 8rem;
  }
  .media-text-product .article__media {
    grid-column: 1/span 7;
  }
  .text-media-product .article__media {
    grid-column: 7/span 7;
  }
  .product-media-text .article__media {
    grid-column: 4/span 7;
  }
  .product-text-media .article__media {
    grid-column: 5/span 8;
    grid-row: 2;
  }
}
.article__media-wrapper .ratio-box:not(:last-child) {
  margin-bottom: 1rem;
}
@media only screen and (min-width: 768px) {
  .article__media-wrapper .ratio-box:not(:last-child) {
    margin-bottom: 1.5rem;
  }
}
.article__text {
  grid-column: span 4;
  grid-row: 1;
}
@media only screen and (min-width: 768px) {
  .article__text {
    grid-column: 9/span 6;
    max-width: 25rem;
    position: -webkit-sticky;
    position: sticky;
    top: 8rem;
  }
  .media-text-product .article__text {
    grid-column: 9/span 6;
  }
  .text-media-product .article__text {
    grid-column: 1/span 6;
  }
  .product-media-text .article__text {
    grid-column: 11/span 6;
    justify-self: end;
  }
  .product-text-media .article__text {
    grid-column: 5/span 8;
    max-width: none;
    position: static;
    top: revert;
  }
}
.article__sub-heading {
  font-family: ReaderMedium;
  font-size: 0.75rem;
  letter-spacing: 1.2px;
  line-height: 1.125rem;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  margin-bottom: 0.5rem;
}
.article__heading {
  font-family: Reader;
  --mb: 1.875rem;
  font-size: 1.375rem;
  letter-spacing: 0.5px;
  line-height: 1.875rem;
  margin-bottom: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .article__heading {
    --mb: 2.625rem;
    font-size: 2rem;
    line-height: 2.625rem;
  }
}
.article__copy {
  font-family: Reader;
  --mb: 1.3125rem;
  font-size: 0.875rem;
  letter-spacing: 0.5px;
  line-height: 1.3125rem;
}
@media only screen and (min-width: 768px) {
  .article__copy {
    --mb: 1.5rem;
    font-size: 1rem;
    line-height: 1.5rem;
  }
}
.article__copy:not(:last-child) {
  margin-bottom: 2rem;
}
.article__copy p:not(:last-child) {
  margin-bottom: var(--mb);
}
.article__copy h1, .article__copy h2, .article__copy h3, .article__copy h4, .article__copy h5, .article__copy h6 {
  margin: calc(var(--mb) * 1.5) 0 var(--mb);
}
.article__copy h1 {
  font-family: Reader;
  font-size: 1.5rem;
  letter-spacing: 0.5px;
  line-height: 2rem;
}
@media only screen and (min-width: 768px) {
  .article__copy h1 {
    font-size: 3rem;
    line-height: 3.625rem;
  }
}
.article__copy h2 {
  font-family: Reader;
  --mb: 1.875rem;
  font-size: 1.375rem;
  letter-spacing: 0.5px;
  line-height: 1.875rem;
}
@media only screen and (min-width: 768px) {
  .article__copy h2 {
    --mb: 2.625rem;
    font-size: 2rem;
    line-height: 2.625rem;
  }
}
.article__copy h3 {
  font-family: Reader;
  --mb: 1.6875rem;
  font-size: 1.125rem;
  letter-spacing: 0.5px;
  line-height: 1.6875rem;
}
@media only screen and (min-width: 768px) {
  .article__copy h3 {
    --mb: 1.875rem;
    font-size: 1.375rem;
    line-height: 1.875rem;
  }
}
.article__copy h4 {
  font-family: ReaderMedium;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 1.5px;
  line-height: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .article__copy h4 {
    font-size: 1.375rem;
    letter-spacing: 2px;
    line-height: 1.875rem;
  }
}
.article__copy h5 {
  font-family: ReaderMedium;
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 1.5px;
  line-height: 1.3125rem;
}
@media only screen and (min-width: 768px) {
  .article__copy h5 {
    font-size: 1.125rem;
    line-height: 1.6875rem;
  }
}
.article__copy h6 {
  font-family: Reader;
  font-size: 0.75;
  letter-spacing: 0.5px;
  line-height: 1.125rem;
}
@media only screen and (min-width: 768px) {
  .article__copy h6 {
    font-size: 0.875rem;
    line-height: 1.3125rem;
  }
}
.article__copy ul {
  list-style: disc;
}
.article__copy ol {
  list-style: decimal;
}
.article__copy ul, .article__copy ol {
  margin-bottom: var(--mb);
}
@media only screen and (max-width: 767px) {
  .article__copy ul, .article__copy ol {
    list-style-position: inside;
  }
}
.article__copy ul li, .article__copy ol li {
  margin-bottom: calc(var(--mb) * 0.5);
}
.article__product {
  grid-column: span 2;
  grid-row: 3;
}
@media only screen and (min-width: 768px) {
  .article__product {
    grid-column: 15/span 2;
    grid-row: 1;
    margin-left: -1rem;
    align-self: center;
    position: -webkit-sticky;
    position: sticky;
    top: 8rem;
  }
  .media-text-product .article__product {
    grid-column: 15/span 2;
  }
  .text-media-product .article__product {
    grid-column: 15/span 2;
  }
  .product-media-text .article__product {
    grid-column: 1/span 2;
    margin-left: 0;
    margin-right: -1rem;
  }
  .product-text-media .article__product {
    grid-row: 2;
    grid-column: 1/span 2;
    margin-left: 0;
    margin-right: -1rem;
  }
}
.article__product .button-small {
  background: var(--black);
  color: var(--white);
  margin-top: 1rem;
}
.article__product-img {
  margin-bottom: 0.5rem;
  display: block;
}
.article__product-sub-heading {
  font-family: Reader;
  font-size: 0.75;
  letter-spacing: 0.5px;
  line-height: 1.125rem;
  color: var(--grey);
}
@media only screen and (min-width: 768px) {
  .article__product-sub-heading {
    font-size: 0.875rem;
    line-height: 1.3125rem;
  }
}
.article__product-heading {
  font-family: ReaderMedium;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  line-height: 1.125rem;
}
@media only screen and (min-width: 768px) {
  .article__product-heading {
    font-size: 0.875rem;
    line-height: 1.3125rem;
  }
}
.article__product-heading :link, .article__product-heading :visited {
  text-decoration: none;
}
.article__product-price {
  font-family: Reader;
  font-size: 0.75;
  letter-spacing: 0.5px;
  line-height: 1.125rem;
}
@media only screen and (min-width: 768px) {
  .article__product-price {
    font-size: 0.875rem;
    line-height: 1.3125rem;
  }
}

.article-gallery {
  display: block;
}
.article-gallery__primary {
  margin-bottom: 0.75rem;
}
.article-gallery__primary:after {
  content: "flickity";
  display: none;
}
@media only screen and (min-width: 768px) {
  .article-gallery__primary:after {
    content: "";
  }
}
@media only screen and (min-width: 768px) {
  .article-gallery__primary {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 2rem;
  }
}
.article-gallery__primary-slide {
  width: 100%;
  margin-right: 1rem;
}
@media only screen and (min-width: 768px) {
  .article-gallery__primary-slide {
    margin-right: 0;
  }
}
.article-gallery__nav:after {
  content: "flickity";
  display: none;
}
@media only screen and (min-width: 768px) {
  .article-gallery__nav:after {
    content: "";
  }
}
@media only screen and (min-width: 768px) {
  .article-gallery__nav {
    display: none;
  }
}
.article-gallery__nav-slide {
  width: calc((100% - 3rem) / 4);
}
.article-gallery__nav-slide:not(:last-child) {
  margin-right: 1rem;
}