.article-single {
  .article-block {
    margin-top: var(--article-block-mt);
    margin-bottom: var(--article-block-mb);
  }

  @media (max-width: 749px) {
    .article-block {
      margin-top: var(--article-block-mt-mobile);
      margin-bottom: var(--article-block-mb-mobile);
    }
  }

  .article-block__image-grid {
    display: grid;
    gap: 12px;
  }

  .article-block--image .article-block__image-grid {
    grid-template-columns: 1fr;
  }

  @media (min-width: 750px) {
    .article-block--image-count-2 .article-block__image-grid {
      grid-template-columns: 1fr 1fr;
    }
  }

  @media (max-width: 749px) {
    .article-block--image-count-2 .article-block__image-grid {
      grid-template-columns: 1fr;
    }
  }

  .article-block__image-item {
    overflow: hidden;
  }

  .article-block__image-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
  }

  .block-visibility--both {
    display: block;
  }

  .block-visibility--desktop {
    display: block;
  }

  .block-visibility--mobile {
    display: none;
  }




  @media (max-width: 749px) {
    .block-visibility--desktop {
      display: none;
    }

    .block-visibility--mobile {
      display: block;
    }
  }

  .article__hero {
    padding: 60px 0 20px;
    background-color: var(--color-brand-light-mint);

    @media (min-width: 750px) {
      padding: 60px 0;
    }

    .article__blog-link {
      position: relative;
      z-index: 2;
      display: inline-block;
      pointer-events: auto;
      color: var(--color-text-primary);
      font-size: 16px;
      font-weight: 600;
      line-height: 130%;
      margin-bottom: 15px;
    }

    .article__title {
      color: var(--color-section-title);
      font-size: 36px;
      font-weight: 400;
      line-height: 120%;
      margin-bottom: 15px;

      @media (min-width: 750px) {
        font-size: 42px;
      }
    }

    .article__meta {
      color: var(--color-text-primary);
      font-size: 16px;
      font-weight: 600;
      line-height: 130%;
    }

    .article__meta>*:not(:last-child)::after,
    .editorial__meta>*:not(:last-child)::after {
      content: "-";
      padding: 0 5px;
      color: var(--color-text-primary);
      font-size: 16px;
      font-weight: 600;
      line-height: 130%;
    }

    .article__image {
      margin-top: 30px;
      margin-bottom: 40px;
    }

    .article__excerpt-wrapper {
      padding-top: 20px;
      margin: 0;
      color: var(--color-text-primary);
      font-size: 16px;
      font-weight: 600;
      line-height: 130%;
      text-align: left;

      p {
        margin: 0;

        &+p {
          margin-top: 15px;
        }
      }
    }
  }

  .article__wrapper {
    padding-top: 20px;

    @media (min-width: 750px) {
      padding-top: 60px;
    }

    .grid--article {
      --gap: 20px;

      @media (min-width: 750px) {
        --gap: 100px;
      }

      .article--single {
        padding-top: 0;
        margin-bottom: 0;
      }

      .article-block {
        .article-block__heading {
          color: var(--color-section-title);
          font-size: 30px;
          font-weight: 400;
          line-height: 120%;
          margin: 0 0 12px;

          @media (min-width: 750px) {
            font-size: 34px;
          }
        }

        p {
          color: var(--color-text-primary);
          font-size: 14px;
          font-weight: 400;
          line-height: 130%;
          margin: 0;

          &+p {
            margin-top: 12px;
          }
        }

        strong {
          font-weight: 600;
        }

        .article-block__richtext {

          h1,
          h2,
          h3,
          h4,
          h5,
          h6 {
            font-family: var(--FONT-STACK-BODY);
            color: var(--color-section-title);
            font-size: 16px;
            font-weight: 600;
            line-height: 130%;
            margin-bottom: 12px;
          }
        }
      }

      blockquote.article-block {
        border: none;
        padding: 30px;
        border-radius: 16px;
        background-color: var(--color-brand-light-mint);
        margin-left: auto;
        margin-right: auto;

        *,
        p {
          color: var(--color-section-title);
          text-align: center;
          font-size: 18px;
          font-weight: 400;
          line-height: 140%;

          @media (min-width: 750px) {
            font-size: 20px;
          }
        }
      }
    }
  }

  .product__block {
    .product-upsell__holder__title {
      color: var(--color-text-primary);
      font-size: 18px;
      font-weight: 400;
      line-height: 140%;
      font-family: var(--FONT-STACK-HEADING);
      margin-bottom: 16px;

      @media (min-width: 750px) {
        font-size: 20px;
      }
    }

    .product__upsell--stacked {
      gap: 16px;
    }

    .product-upsell {
      align-items: center;
      border-radius: 6px;
      background-color: var(--color-brand-light-beige);
      flex-wrap: nowrap;

      .product-upsell__image {
        width: 97px;

        img {
          border-radius: 6px 0 0 6px;
        }

        @media only screen and (min-width: 750px) {
          width: 124px;
        }

      }

      .product-upsell__content {
        padding: 24px;

        .product-upsell__title {
          font-weight: 600;
          font-size: 14px;
          line-height: 120%;
          margin-bottom: 8px;

        }

        .sale .new-price {
          font-weight: 600;
        }

        .product-upsell__price {
          font-size: 14px;
          line-height: 120%;
          color: var(--color-text-secondary);
          margin: 0;
        }

        .product-upsell__actions {
          .btn__outer {
            .product-upsell__btn {
              --btn-size: 42px;
              --btn-text: var(--color-text-primary);
              background-color: var(--color-input-bg-primary);
            }

            .btn__plus {
              --icon-size: 21px;
              background: var(--color-text-primary);
            }

            .btn__text {
              color: var(--color-text-primary);
            }

            .product-upsell__btn .btn__text {
              width: 0;
              min-width: 0;
              padding: 0;
              overflow: hidden;
            }
          }
        }
      }
    }
  }

  .sidebar {
    padding: 0;
  }

  .sidebar__contents {
    .widget__title {
      color: var(--color-text-primary);
      font-family: var(--FONT-STACK-HEADING);
      font-size: 18px;
      font-weight: 400;
      line-height: 140%;
      border: none;
      padding: 0;
      margin-bottom: 12px;

      @media (min-width: 750px) {
        font-size: 20px;
        margin-bottom: 16px;
      }
    }

    .product__block {
      margin-bottom: 40px;

      @media (min-width: 750px) {
        margin-bottom: 50px;
      }
    }
  }

  .widget__recent {
    margin-top: 0;

    .article__image {
      margin-bottom: 8px;
    }

    .article__text-wrapper {
      padding: 0;
    }

    .article__title {
      color: var(--color-text-primary);
      font-family: var(--FONT-STACK-HEADING);
      font-size: 16px;
      font-weight: 500;
      line-height: 120%;
      margin-bottom: 8px;
    }

    .article__meta {
      display: none;
      margin: 0;
      padding: 0;

      time {
        color: var(--color-text-secondary);
        font-family: var(--FONT-STACK-BODY);
        font-size: 16px;
        font-weight: 600;
        line-height: 130%;
      }
    }

    .image-wrapper img {
      border-radius: 6px;
    }

    .editorial__excerpt {
      * {
        margin: 0;
        color: var(--color-text-secondary);
        font-size: 14px;
        font-weight: 400;
        line-height: 130%;
      }
    }

    .editorial__link {
      margin-top: 16px;

      .btn {
        color: var(--color-text-primary);
        font-size: 14px;
        font-weight: 700;
        line-height: 120%;
        text-transform: uppercase;
        padding-bottom: 6px;
        border-bottom: 1px solid var(--color-text-primary);
      }
    }

    @media (min-width: 750px) {
      .article+.article {
        margin-top: 24px;
      }

      .editorial__excerpt,
      .editorial__link {
        display: none;
      }

      .article__meta {
        display: flex;
      }
    }

    @media (max-width: 749px) {
      display: flex;
      gap: 16px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x proximity;
      padding-bottom: 4px;
      padding-bottom: 20px;

      .article {
        flex: 0 0 calc((100% - 16px) / 1.05);
        min-width: 0;
        scroll-snap-align: start;
      }
    }
  }
  .article__content__wrapper{
    h1, h2, h3, h4, h5, h6 {
      color: var(--color-section-title);
      font-size: 30px;
      font-weight: 400;
      line-height: 120%;
      margin: 0 0 12px;

      @media (min-width: 750px) {
        font-size: 34px;
      }
    }

    p {
      color: var(--color-text-primary);
      font-size: 14px;
      font-weight: 400;
      line-height: 130%;
      margin: 0;

      &+p {
        margin-top: 12px;
      }
    }

    strong {
      font-weight: 600;
    }
  }
}