.image-slider {
  max-width: 100%;
  max-height: 100%;
}

.image-slider img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
}

.image-400 {
  width: 100%;
  height: calc(200px - 20px) !important;
  margin-bottom: 0.5rem;
  border-radius: 0.25rem;
}

.image-400 img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
}

.image-100 {
  width: 100%;
  height: calc(50px - 20px) !important;
  margin-bottom: 0.5rem;
  border-radius: 0.25rem;
}

.image-100 img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
}

.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-truncate-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.image-post-recent {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(8px);
  color: black;
  width: 100%;
  height: calc(420px - 20px) !important;
  margin-bottom: 0.5rem;
  border-radius: 0.25rem;
}

.image-post-recent img{
  max-width: 100%;
  max-height: 100%;
  object-fit: fill;
  object-position: center;
}

.text-announcement {
  width: 100%;
  display: block;
}

@media (min-width: 768px) {

  .text-announcement {
    width: 90%;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}



.skeleton {
  animation: skeleton-loading 1s linear infinite alternate;
}
@keyframes skeleton-loading {
  0% {
    background-color: #c1cfd6;
  }
  100% {
    background-color: #eff3f4;
  }
}

.skeleton-general{
  width: 100%;
  height: calc(60px - 20px);
  margin-bottom: 0.5rem;
  border-radius: 0.25rem;
}

.skeleton-first-news{
    width: 100%;
    height: calc(420px - 20px);
    margin-bottom: 0.5rem;
    border-radius: 0.25rem;
}

.skeleton-img {
  width: 100%;
  height: calc(80px - 20px);
  margin-bottom: 0.5rem;
  border-radius: 0.25rem;
}

.skeleton-icon {
  width: 100%;
  height: calc(80px - 20px);
  margin-bottom: 0.5rem;
  border-radius: 0.25rem;
}

.skeleton-text {
  width: 100%;
  height: calc(50px - 25px);
  margin-bottom: 0.5rem;
  border-radius: 0.25rem;
}

.skeleton-small-text {
  width: 100%;
  height: calc(30px - 10px);
  margin-bottom: 0.5rem;
  border-radius: 0.25rem;
}

.skeleton-description {
  width: 100%;
  height: calc(80px - 30px);
  margin-bottom: 0.5rem;
  border-radius: 0.25rem;
}
@media screen and (min-width: 768px) {
  .skeleton-img {
    width: 100%;
    height: calc(100px - 30px);
    margin-bottom: 0.5rem;
    border-radius: 0.25rem;
  }
  .skeleton-text {
    width: 100%;
    height: calc(60px - 30px);
    margin-bottom: 0.5rem;
    border-radius: 0.25rem;
  }
  .skeleton-description {
    width: 100%;
    height: calc(100px - 30px);
    margin-bottom: 0.5rem;
    border-radius: 0.25rem;
  }
}


.post-meta li{
  font-size: 10px;
}

@media (min-width: 768px) {
  .post-meta li{
    font-size: 12px;
  }

}