/** Shopify CDN: Minification failed

Line 75:18 Unexpected "{"
Line 75:27 Expected ":"
Line 80:18 Unexpected "{"
Line 80:27 Expected ":"
Line 109:18 Unexpected "{"
Line 109:27 Expected ":"

**/
.blog .placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 22rem;
  text-align: center;
  padding: 4rem 2rem 5rem;
  margin: 0 2rem;
}

@media screen and (min-width: 750px) {
  .blog .placeholder {
    margin: 0;
  }
}

.blog__post {
  padding-bottom: 0;
}

@media screen and (min-width: 750px) {
  .blog__post:only-child {
    text-align: center;
  }

  .blog__posts--4-items .grid__item {
    width: 50%;
  }
}

.blog__posts.articles-wrapper {
  row-gap: 3rem;
}

@media screen and (min-width: 990px) {
  .blog__posts.articles-wrapper {
    padding-bottom: 0;
    row-gap: 5rem;
  }
}

.blog__posts.articles-wrapper .article {
  scroll-snap-align: start;
}

@media screen and (max-width: 749px) {
  .slider.blog__posts--1-items {
    padding-bottom: 0;
  }

  .slider.blog__posts .article-card__excerpt,
  .slider.blog__posts .article-card__footer {
    display: none;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .slider.blog__posts--1-items,
  .slider.blog__posts--2-items {
    padding-bottom: 0;
  }
}

/* Make the .blog.page-width container the reference for positioning */
#shopify-section-{{ section.id }} .blog.page-width {
  position: relative; /* Crucial for absolute positioning of child elements */
}

/* Reposition and restyle the 'View All' container */
#shopify-section-{{ section.id }} .blog .view-all {
  position: absolute;
  /*
    Adjust 'top' to vertically align with your "Blog" title if needed.
    'top: 0;' aligns it with the top of the .page-width container.
    If your title is slightly lower due to its own margin/padding,
    you might need a small positive value e.g., top: 10px;
    Based on your image, top: 0; or a very small value seems appropriate.
  */
  top: 10; /* Adjust if vertical alignment with title is off */

  /*
    IMPORTANT: Adjust 'right' to align with your content's right edge.
    1. On your live page, right-click near the blog posts and select "Inspect" or "Inspect Element".
    2. In the developer tools, find the HTML element <div class="blog page-width"> (or similar with class "page-width").
    3. Select it. In the "Styles" or "Computed" panel, find its 'padding-right' value.
    4. Use that value for 'right' below.
    Common values are 15px, 20px, 1.5rem, 2rem, or a CSS variable like var(--padding-gutter).
  */
  right: 20px; /* ### ADJUST THIS VALUE - Example: 20px or 1.5rem or var(--your-theme-gutter) ### */

  z-index: 2;
  margin: 0;
  width: auto;
  text-align: right;
  display: block;
}

/* Restyle the actual 'View All' link (which was formerly a button) */
#shopify-section-{{ section.id }} .blog .view-all .button {
  background: transparent !important;
  border: none !important;
  color: var(--color-link, #0000EE); /* Use your theme's link color or a specific color */
  padding: 0 !important;
  text-decoration: underline !important;
  font-size: var(--font-size-small, 1.4rem); /* Adjust font size as needed */
  font-weight: normal !important;
  text-transform: none !important;
  width: auto !important;
  display: inline !important;
  line-height: normal;
}