/** Shopify CDN: Minification failed

Line 146:26 Unexpected "*"

**/
.article__wrapper {
  gap: calc(var(--spacing) * 2);
}
.article__pagination {
  margin-top: calc(var(--spacing) * 2);
}
.article-index-1 .article__header {
  margin-top: calc(var(--spacing) * 4);
}
.article__content {
  font-size: var(--font-blog-post-size);
  line-height: 1.65;
}
.article__comment + .article__comment {
  margin-top: 24px;
}
/* .blog-product-row{
  display:flex;
  align-items: stretch;
  gap: 32px;
  margin: 0 auto;
}
.blog-product-row-media{
  width:60%;
  display: flex;
}
.blog-product-row-card{
  width:40%;
}
.blog-product-row-media a {
  display: flex;
} */

/* Base — mobile first (0–458px) */


/*
.blog-product-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.blog-product-row-media,
.blog-product-row-media a,
.blog-product-row-media img {
  width: 100%;
}


@media (min-width: 459px) {
  .blog-product-row {
    gap: 20px;
  }
}

@media (min-width: 768px) {
  .blog-product-row {
    flex-direction: row;
    align-items: stretch;
    gap: 24px;
  }

  .blog-product-row-media { display: flex; width: 60%;}
  .blog-product-row-card  { width: 40%; }
  .blog-product-row-media a { display: flex;}
}


@media (min-width: 1024px) {
  .blog-product-row {
    gap: 32px;
  }
}


@media (min-width: 1280px) {
  .blog-product-row {
    max-width: 1200px;
  }
}


@media (min-width: 1680px) {
  .blog-product-row {
    max-width: 1320px;
  }
}



.blog-product-row-1{
  display: flex;
  align-items: stretch;
  gap: 32px;
  margin: 0 auto;
}

.blog-product-row-media-1{
  width: 60%;
  display: flex;
}

.blog-product-row-card-1{
  width: 40%;
}

.blog-product-row-media-1 a{
  display: block;
  width: 100%;
  height: 100%;
}

.blog-product-row-media-1 img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 768px){
  .blog-product-row-1{
    flex-direction: column;
  }

  .blog-product-row-media-1,
  .blog-product-row-card-1{
    width: 100%;
  }

  .blog-product-row-media-1{
    aspect-ratio: auto; 
  }

  .blog-product-row-media-1 img{
    width: 100%;
    height: auto;
    object-fit: contain; 
    display: block;
  }
}
*/

поняла 👍 вот **ОДИН цельный кусок CSS**, **копипаст → работает**, ничего не сломает, без объяснений и без разрывов.

```css
/* ===============================
   VERTICAL / DEFAULT IMAGE
================================ */

.blog-product-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.blog-product-row-media,
.blog-product-row-media a,
.blog-product-row-media img {
  width: 100%;
}

.blog-product-row-media img {
  display: block;
}

/* ≥ 459px */
@media (min-width: 459px) {
  .blog-product-row {
    gap: 20px;
  }
}

/* ≥ 768px */
@media (min-width: 768px) {
  .blog-product-row {
    flex-direction: row;
    align-items: stretch;
    gap: 24px;
  }

  .blog-product-row-media {
    width: 60%;
    display: flex;
  }

  .blog-product-row-card {
    width: 40%;
  }

  .blog-product-row-media a {
    display: flex;
    width: 100%;
  }
}

/* ≥ 1024px */
@media (min-width: 1024px) {
  .blog-product-row {
    gap: 32px;
  }
}

/* ≥ 1280px */
@media (min-width: 1280px) {
  .blog-product-row {
    max-width: 1200px;
    margin: 0 auto;
  }
}

/* ≥ 1680px */
@media (min-width: 1680px) {
  .blog-product-row {
    max-width: 1320px;
  }
}

/* ===============================
   HORIZONTAL IMAGE VARIANT
================================ */

.blog-product-row-1 {
  display: flex;
  align-items: stretch;
  gap: 32px;
  margin: 0 auto;
}

.blog-product-row-media-1 {
  width: 60%;
  display: flex;
}

.blog-product-row-card-1 {
  width: 40%;
}

.blog-product-row-media-1 a {
  display: flex;
  width: 100%;
  height: 100%;
}

.blog-product-row-media-1 img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* ≤ 767px */
@media (max-width: 767px) {
  .blog-product-row-1 {
    flex-direction: column;
    gap: 16px;
  }

  .blog-product-row-media-1,
  .blog-product-row-card-1 {
    width: 100%;
  }

  .blog-product-row-media-1 img {
    height: auto;
    object-fit: contain;
  }
}

/* ===============================
   BLOG PRODUCT — BASE (mobile)
================================ */

.blog-product {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.blog-product__media,
.blog-product__media a,
.blog-product__media img {
  width: 100%;
}

.blog-product__media img {
  display: block;
}

/* ≥ 459px — large mobile */
@media (min-width: 459px) {
  .blog-product {
    gap: 20px;
  }
}

/* ≥ 768px — tablet / desktop */
@media (min-width: 768px) {
  .blog-product {
    flex-direction: row;
    align-items: stretch;
    gap: 24px;
  }

  .blog-product__media {
    width: 60%;
    display: flex;
  }

  .blog-product__card {
    width: 40%;
  }

  .blog-product__media a {
    display: flex;
    width: 100%;
  }
}

/* ≥ 1024px — desktop */
@media (min-width: 1024px) {
  .blog-product {
    gap: 32px;
  }
}

/* ≥ 1280px — large desktop */
@media (min-width: 1280px) {
  .blog-product {
    max-width: 1200px;
    margin: 0 auto;
  }
}

/* ≥ 1680px — very large screens */
@media (min-width: 1680px) {
  .blog-product {
    max-width: 1320px;
  }
}

/* ===============================
   HORIZONTAL IMAGE MODIFIER
================================ */

/* tablet + */
@media (min-width: 768px) {
  .blog-product--horizontal .blog-product__media img {
    height: 100%;
    object-fit: cover;
  }
}

/* mobile fix */
@media (max-width: 767px) {
  .blog-product--horizontal .blog-product__media img {
    height: auto;
    object-fit: contain;
  }
}