.blog-title {
  text-align: center;
  margin-bottom: 1rem;
}

.blog-list {
  background-color: hsla(263, 30%, 15%, 0.8);
  position: relative;
  z-index: 1;
}

.blog-list::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;

  border: 1.5px dashed var(--color-nav-bar);

  filter: drop-shadow(0 0 0.25rem hsl(257, 100%, 80%))
    drop-shadow(0 0 0.5rem hsl(257, 100%, 70%))
    drop-shadow(0 0 1.125rem hsl(257, 68%, 50%));
}

.blog-article img {
  display: block;
  max-width: 150px;
  height: auto;

  @media (min-width: 50rem) {
    max-width: 100%;
  }
}

.blog-article {
  display: grid;
  padding: 1rem;
  gap: 1rem;


  @media (min-width: 50rem) {
    grid-template-columns: 1fr 4fr;
      gap: 2rem;
  }

  p {
    margin-bottom: 1rem;
  }
}