.main-blog {
  background-color: rgb(var(--color-background));
}

.main-blog__container {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.main-blog__list {
  --gap: 22px;
}

.main-blog__title {
  color: rgba(var(--color-text));
}

.main-blog__list{
  display: grid;
  grid-template-columns: repeat(var(--desktop-columns),1fr);
  row-gap: 12px;
  column-gap: 20px;
}

@media(max-width:768px){
  .main-blog__list{
    display: grid;
    grid-template-columns: repeat(1,1fr);
  }
}