#BlogSystemS1 .blog-archive-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  margin-bottom: clamp(1.75rem, 3vw, 3rem);
}

#BlogSystemS1 .blog-archive-heading {
  max-width: 58rem;
}

#BlogSystemS1 .blog-archive-heading .cnt-stl {
  max-width: 46rem;
}

#BlogSystemS1 .blog-archive-archives {
  align-self: start;
}

#BlogSystemS1 .blog-archive-archives ul {
  margin: 0;
  padding: 0;
}

#BlogSystemS1 .blog-archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
  gap: clamp(1rem, 1.4vw, 1.45rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

#BlogSystemS1 .blog-archive-grid > li {
  display: flex;
  min-width: 0;
  margin: 0;
}

#BlogSystemS1 .blog-archive-grid > li > a {
  align-items: stretch;
  height: 100%;
  min-width: 0;
  overflow: hidden;
}

#BlogSystemS1 .blog-archive-grid picture {
  flex: 0 0 auto;
}

#BlogSystemS1 .blog-archive-grid time {
  margin-bottom: 0.55rem;
}

#BlogSystemS1 .blog-archive-grid strong {
  line-height: 1.22;
}

#BlogSystemS1 .blog-archive-grid p {
  line-height: 1.55;
}

@supports (-webkit-line-clamp: 1) {
  #BlogSystemS1 .blog-archive-grid strong,
  #BlogSystemS1 .blog-archive-grid p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  #BlogSystemS1 .blog-archive-grid strong {
    -webkit-line-clamp: 4;
  }

  #BlogSystemS1 .blog-archive-grid p {
    -webkit-line-clamp: 5;
  }
}

@media screen and (max-width: 1279px) {
  #BlogSystemS1 .blog-archive-intro {
    grid-template-columns: 1fr;
  }

  #BlogSystemS1 .blog-archive-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  }
}

@media screen and (max-width: 899px) {
  #BlogSystemS1 .blog-archive-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  }
}

@media screen and (max-width: 699px) {
  #BlogSystemS1 .blog-archive-grid {
    grid-template-columns: 1fr;
  }
}