#component-blogs {
  background: var(--do-white-2);
  padding: 4rem 0 12rem 0;
}

#component-blogs > .eg-container > .eg-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#component-blogs > .eg-container > .eg-wrapper > .heading {
  display: flex;
  gap: 1rem;
  background: var(--do-white);
  border-radius: 15px;
  padding: 1rem;
}

#component-blogs .heading > .left,
#component-blogs .heading > .right {
  width: 50%;
}

#component-blogs .heading > .left > img {
  width: 100%;
  height: 100%;
  aspect-ratio: 45/31;
  object-fit: cover;
  object-position: center;
  border-radius: 15px;
}

#component-blogs .heading > .right {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 1rem;
}

#component-blogs .heading > .right > b {
  color: var(--do-black);
  font-size: var(--font-26);
  font-weight: 700;
}

#component-blogs .heading > .right > p {
  color: var(--do-black);
  font-size: var(--font-16);
  font-weight: 400;
  line-height: var(--line-26);
}

#component-blogs .heading > .right > .date {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--do-grey-2);
  font-size: var(--font-14);
  font-weight: 400;
}

#component-blogs > .eg-container > .eg-wrapper > .content {
  display: grid;
  grid-template-columns: var(--col-4);
  gap: 1rem;
}

#component-blogs .swiper {
  width: 100%;
  display: none;
}

#component-blogs .swiper-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  position: unset;
  margin-top: 1rem;
}

#component-blogs .swiper-horizontal > .swiper-pagination-bullets {
  top: unset;
  bottom: unset;
}

#component-blogs .swiper-horizontal > .swiper-pagination > .swiper-pagination-bullet {
  width: 13px;
  height: 13px;
  border: 2px solid var(--do-black);
  background: rgba(0, 0, 0, 0);
  opacity: 1;
}

#component-blogs .swiper-horizontal > .swiper-pagination > .swiper-pagination-bullet-active {
  background: var(--do-black);
}

@media (max-width: 768px) {
  #component-blogs > .eg-container > .eg-wrapper > .heading {
    flex-direction: column;
  }
  #component-blogs .heading > .left,
  #component-blogs .heading > .right {
    width: 100%;
  }
  #component-blogs > .eg-container > .eg-wrapper > .content {
    grid-template-columns: var(--col-6);
  }
}

@media (max-width: 576px) {
  #component-blogs > .eg-container > .eg-wrapper > .content {
    display: none;
  }
  #component-blogs .swiper {
    display: block;
  }
  #component-blogs {
    padding: 4rem 0 8rem 0;
  }
}