.blog__section {
  position: relative;
  margin-inline: auto;
  padding: 20px 10px;
  width: 90%;
  max-width: 100%;
}

@media (max-width: 1024px) {
  .blog__section {
    width: 100%;
  }
}

.blog__feed {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: var(--space-sm);
  display: grid;
  margin-inline: auto;
  width: 80%;
  height: max-content;
}

@media (max-width: 768px) {
  .blog__feed {
    width: 100%;
  }
}

.blog__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  background-color: var(--color-white);
  box-shadow: 0 0 0 1px rgba(var(--rgb-black), 0.075);
  position: relative;
  padding: 8.5% 7%;
  margin: 0px auto;
  background-color: var(--color-white);
  width: 100%;
  min-height: 10em;
  z-index: 3;
}

@media (max-width: 48em) {
  .blog__card {
    width: 100%;
  }
}

.blog__show {
  margin-top: var(--space-sm);
  width: max-content;
}

.blog__post {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  /* max-width: 80ch; */
  max-width: 50rem;
}

.blog__title {
  align-self: center;
  margin: var(--space-xl) 0;
}

.blog__content {
  margin-top: var(--space-xl);
  /*line-height: 1.4;*/
}

/* Code blocks for blog */
.blog__post pre {
  overflow-x: auto;
  white-space: pre-wrap;
  /*margin-bottom: 1rem;*/
  background-color: #ffffff;
  padding: var(--space-sm);
  /*margin-inline: var(--space-xs);*/
}

.blog__controls {
  display: flex;
  flex-direction: row;
  gap: var(--space-sm);
  margin: var(--space-md) 0 var(--space-xs) 0;
}