.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  -webkit-column-gap: 2em;
     -moz-column-gap: 2em;
          column-gap: 2em;
  row-gap: 2.5em;
}
@media (min-width: 768px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.blog-grid .fncy-bxstls1 {
  position: relative;
}
.blog-grid .fncy-bxstls1 .date-box {
  position: absolute;
  top: 30px;
  right: 40px;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.637);
  color: #ffffff;
  padding: 0.1em 0.6em;
  font-size: clamp(0.5rem, 1vw + 0.2em, 0.6rem);
}
.blog-grid .fncy-bxstls1 .date-box time {
  font-weight: 300;
}
.blog-grid .fncy-bxstls1 figure::before {
  opacity: 0.8 !important;
}

.blog-card.blog-card--details {
  position: relative;
}
.blog-card.blog-card--details .blog-time {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  font-size: clamp(0.7rem, 1.5vw + 0.2em, 0.8em);
  margin-bottom: 15px;
  background-color: rgba(0, 0, 0, 0.637);
  color: #ffffff;
  padding: 0.4em 0.6em;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
}
.blog-card.blog-card--details .blog-time svg {
  width: clamp(20px, 3vw + 0.5em, 3px);
  height: clamp(20px, 3vw + 0.5em, 30px);
  color: #fff;
}
.blog-card.blog-card--details .blog-card__head {
  height: auto;
  margin-bottom: 25px;
  height: 300px;
  position: relative;
}
@media (min-width: 768px) {
  .blog-card.blog-card--details .blog-card__head {
    height: clamp(200px, 30vw + 0.5em, 500px);
  }
}
.blog-card.blog-card--details .blog-card__head img {
  height: auto;
}
.blog-card.blog-card--details .blog-card__title h2 {
  font-size: clamp(2rem, 2.5vw + 0.5em, 2rem);
  margin-bottom: 0.5em;
  max-width: 60ch;
  font-weight: 500;
}
.blog-card.blog-card--details .blog-card__footer h4 {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: clamp(1rem, 1.5vw + 0.5em, 1.1rem);
  font-weight: 500;
}
.blog-card.blog-card--details .blog-card__footer h3 {
  font-size: clamp(1.5rem, 2vw + 0.5em, 1.5rem);
  margin-bottom: 15px;
  font-weight: 500;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.blog-card__head {
  position: relative;
  overflow: hidden;
  margin-bottom: 15px;
  height: 250px;
}
@media (min-width: 768px) {
  .blog-card__head {
    height: clamp(200px, 30vw + 0.5em, 350px);
  }
}
.blog-card__head img {
  width: 100%;
  height: 100%;
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
  -o-object-fit: cover;
     object-fit: cover;
}
.blog-card__head .blog-time {
  position: absolute;
  z-index: 10;
  top: 4%;
  right: 3%;
  background-color: rgba(0, 0, 0, 0.637);
  color: #ffffff;
  padding: 0.4em 0.6em;
  border-radius: 5px;
  font-size: clamp(0.7rem, 1vw + 0.2em, 0.7rem);
  font-weight: 400;
  line-height: 1;
}
.blog-card__body h3 {
  font-size: clamp(1.2rem, 1.5vw + 0.5em, 1.3rem);
  margin-bottom: 10px;
  font-weight: 500;
}
.blog-card__body p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-right: 0.4em;
}
.blog-card__body hr {
  border: none;
  border-top: 1px solid rgba(160, 160, 160, 0.1882352941);
  margin: 10px 0;
}
.blog-card__body .blog-meta {
  font-size: clamp(0.8rem, 1vw + 0.2em, 1rem);
  color: #666;
}
.blog-card__body .blog-meta span {
  font-weight: 500;
}

.blg-crls .fncy-bxstls1 {
  position: relative;
}
.blg-crls .fncy-bxstls1 .date-box {
  position: absolute;
  top: 30px;
  right: 40px;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.637);
  color: #ffffff;
  padding: 0.1em 0.6em;
  font-size: clamp(0.5rem, 1vw + 0.2em, 0.6rem);
}
.blg-crls .fncy-bxstls1 .date-box time {
  font-weight: 300;
}
.blg-crls .fncy-bxstls1 figure::before {
  opacity: 0.8 !important;
}

.crd-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
}