.blog-featured {
  position: relative;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.blog-featured .overlay,
.blog-normal .overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.posts-list {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

.blog-featured,
.blog-normal,
.blog-post {
  --text-width: 85ch;
  --md-overlay-from: rgba(22, 35, 43, 0.40);
  --overlay-from: rgba(22, 35, 43, 0.85);
}

.blog-featured .content {
  position: relative;
  color: white;
  padding: 2rem;
  z-index: 2;

  p {
    max-width: var(--text-width);
  }
}

.blog-normal {
  
  .card-text {
    max-width: var(--text-width);
  }
}

.blog-post {
  position: relative;
  background-size: cover;
  background-position: center;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.blog-post .overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.blog-post .content {
  position: relative;
  color: white;
  padding: 2rem;
  z-index: 2;

  p {
    max-width: var(--text-width);
  }
}

.type-blog .post-content {
  
  :not(li, figure, img, figcaption, figcaption, p:has(img), .admonition *, .card, .card *) {
    margin-left: auto;
    margin-right: auto;
  }
  
  :not(li, figure, img, figcaption, figcaption, p:has(img), .admonition *, .card, .card *) {
    max-width: 100%;
  }
  
  @media (min-width: 768px) {

    :not(li, figure, img, figcaption, figcaption, p:has(img), .admonition *, .card, .card *) {
      max-width: 80%;
    }
  }
  img:not(.card-body img, figure img) {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
  img:not(.card-body img, figure img) {
    width: 100%;
  }
  img:not(.card-body img, figure img) {
    border-radius: 0.5rem;
  }
  img:not(.card-body img, figure img) {
    border-width: 1px;
  }
  img:not(.card-body img, figure img) {
    --tw-border-opacity: 1;
    border-color: rgb(229 229 229 / var(--tw-border-opacity, 1));
  }
  figure {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
  figure {

    > img {
      margin-top: 0px;
      margin-bottom: 0px;
    }

    > img {
      border-radius: 0.5rem;
    }

    > img {
      --tw-border-opacity: 1;
      border-color: rgb(229 229 229 / var(--tw-border-opacity, 1));
    }
  }
  figcaption {
    margin-top: 0.75rem;
  }
  figcaption {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  figcaption {
    --tw-text-opacity: 1;
    color: rgb(115 115 115 / var(--tw-text-opacity, 1));
  }
  .admonition {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
}