.shopify-section--blog {
  & > zag-blog {
    position: relative;
    inline-size: calc(100% - 2 * var(--zag-gutter));
    max-inline-size: var(--max-inline-size, 120rem);
    margin-block: 5rem;
    margin-inline: auto;

    @media (width >= 60rem) {
      margin-block: 7.5rem 10rem;
    }
  }

  & .header {
    @media (width >= 60rem) {
      max-inline-size: 58.75rem;
      margin-inline-start: auto;
    }
  }

  & .overtitle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    margin-block-end: 1.5rem;

    & svg {
      block-size: 0.625rem;
      inline-size: 0.625rem;
    }
  }

  & .tags {
    display: grid;
    position: relative;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-block-start: 2.5rem;

    @media (width >= 30rem) {
      grid-template-columns: repeat(3, 1fr);
    }

    @media (width >= 60rem) {
      grid-template-columns: repeat(4, 1fr);
    }

    @media (width >= 80rem) {
      &:has(:nth-child(5)) {
        grid-template-columns: repeat(5, 1fr);
      }
    }

    @media (width >= 90rem) {
      &:has(:nth-child(6)) {
        grid-template-columns: repeat(6, 1fr);
      }
    }
  }

  & .tag {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    font-weight: 500;
    background-color: var(--white-color);
    color: var(--black-color);
    border: 0.0625rem solid var(--black-color);
    border-radius: 0.125rem;
    transition: 0.15s ease-out;

    &::after {
      content: "(" attr(data-article-count) ")";
      opacity: 0.6;
    }

    &:is(:hover, :active) {
      background-color: var(--orange-color);
      color: var(--white-color);
      border-color: var(--orange-color);

      &::after {
        opacity: 1;
      }
    }

    &.tag--current {
      background-color: var(--orange-color);
      color: var(--white-color);
      border-color: var(--orange-color);

      &:is(:hover, :active) {
        background-color: var(--white-color);
        color: var(--black-color);
        border-color: var(--black-color);

        &::after {
          opacity: 0.6;
        }
      }
    }

    &.tag--current::after {
      opacity: 1;
    }
  }

  & .article-grid {
    display: grid;
    position: relative;
    margin-block-start: 4rem;

    @media (width >= 60rem) {
      grid-template-columns: repeat(2, 1fr);
      gap: 10rem 7.5rem;

      & > * {
        order: var(--desktop-order, initial);
      }
    }

    @media (width >= 80rem) {
      gap: 10rem 15rem;
    }

    & .article-image-container > .blog-image {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
      aspect-ratio: 1;
      transition: transform 0.3s ease;
    }

    & .article-image-container {
      overflow: hidden;
    }

    & .article-image-container:hover > .blog-image {
      transform: scale(1.05);
    }

    & .article-image-container > .blog-image-placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      inline-size: 100%;
      block-size: 100%;
      aspect-ratio: 1/1;
      background: var(--background-color-muted, #f5f5f5);
      color: var(--text-color-muted, #999);

      & svg {
        inline-size: 3rem;
        block-size: 3rem;
        opacity: 0.5;
      }
    }
  }

  & .article-grid > :not(.blog-card):not(:first-child) {
    margin-block-start: 3rem;

    @media (width >= 60rem) {
      margin-block-start: 0rem;
    }
  }

  & .blog-card {
    margin-block-start: 3rem;
    padding: 0;
    border: none;

    &:first-child {
      margin-block-start: 0;
    }

    @media (width >= 60rem) {
      margin-block-start: 0rem;
    }
  }

  & [data-position] + .blog-card {
    grid-template-columns: 1fr;
    max-inline-size: 26.25rem;
    margin-block-start: 1.5rem;

    & .blog-card-content {
      padding-inline: 0rem;
    }

    @media (width >= 60rem) {
      margin-block-start: 0rem;
      translate: -6rem 0%;

      & + .blog-card {
        align-items: flex-end;
        margin-block-start: auto;

        & .blog-card-content {
          block-size: 13.625rem;
        }
      }
    }

    @media (width >= 80rem) {
      translate: -13.5rem 0%;
    }
  }

  & [data-position="right"] + .blog-card {
    @media (width >= 60rem) {
      justify-self: flex-end;
      translate: 6rem 0%;
      align-items: flex-start;
      text-align: end;

      & .blog-tag {
        justify-content: flex-end;
      }

      & .blog-read-more {
        justify-content: flex-end;
        margin-inline-start: auto;
      }

      @media (width >= 80rem) {
        translate: calc(max(90rem, 100vw) + 13.5rem) 0%;
        translate: 13.5rem 0%;
      }
    }
  }

  @media (width >= 60rem) {
    & [data-position] {
      grid-row: span 2;
    }
  }

  & .pagination-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-block-start: 2.5rem;

    @media (width >= 60rem) {
      margin-block-start: 5rem;
    }

    & > * {
      display: flex;
      align-items: center;
      justify-content: center;
      transition: 0.15s ease-out;

      &:has(a):hover {
        opacity: 0.6;
      }
    }

    & :is(span:not(:has(a)), a) {
      font-size: 1rem;
      padding: 1rem;
    }
  }
}