.article-grid-section .breadcrumbs-snippet {
  margin-bottom: 42px;
  margin-top: 20px;
}
.article-grid-section .wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 40px;
}
.article-grid-section .wrapper .load {
  font-weight: bold;
  cursor: pointer;
}
.article-grid-section .wrapper .blog-grid {
  display: grid;
  grid-template-rows: auto repeat(auto-fill, minmax(200px, 1fr));
  gap: 60px 30px;
}
.article-grid-section .sort-container {
  cursor: pointer;
  position: relative;
  align-self: flex-end;
  margin-bottom: 15px;
  color: var(--text-primary-color);
  padding-left: 63px;
  background-color: var(--primary-color);
}
@media screen and (max-width: 768px) {
  .article-grid-section .sort-container {
    margin-top: 15px;
  }
}
.article-grid-section .sort-container::before {
  content: attr(sort-by);
  position: absolute;
  inset: 0 auto 0 12px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}
.article-grid-section .sort-container select {
  background-color: white;
  padding: 8px 100px 8px 12px;
  border: none;
  border-radius: 22px;
  width: 100%;
}
.article-grid-section .sort-container select:focus-visible {
  outline: none;
}
.article-grid-section .sort-container select option {
  background-color: #fff;
}
.article-grid-section .sort-container svg {
  position: absolute;
  width: 15px;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  pointer-events: none;
}
.article-grid-section .sort-container select:focus-visible svg {
  transform: rotateX("180deg");
}

@media (max-width: 950px) {
  .article-grid-qf-section .breadcrumbs-snippet {
    margin-bottom: 10px;
    margin-top: 10px;
  }
}