@use "../../../../styles/abstracts/mixins";  
@use "../../../../styles/abstracts/variables";

.news {
  width: 100%;

  &__grid {
    display: grid;

    grid-template-columns:
      repeat(
        auto-fill,
        minmax(340px, 1fr)
      );

    gap: 1.5rem;

    margin-top: 2rem;

    width: 100%;
  }
}

/* ==========================================
   PAGINATION
========================================== */

.pagination {
  display: flex;

  justify-content: center;

  margin-top: 2rem;
}

/* ==========================================
   BLOG SKELETON
========================================== */

.blogSkeleton {
  position: relative;

  overflow: hidden;

  border-radius: 24px;

  background: linear-gradient(
    180deg,
    rgba(22, 22, 24, 0.98) 0%,
    rgba(15, 15, 18, 1) 100%
  );

  border: 1px solid
    rgba(255, 255, 255, 0.05);

  min-height: 420px;

  &::before {
    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.06),
      transparent
    );

    transform: translateX(-100%);

    animation: shimmer 1.8s infinite;
  }

  &__image {
    height: 200px;

    background:
      rgba(
        255,
        255,
        255,
        0.04
      );
  }

  &__body {
    padding: 1.5rem;
  }

  &__badge {
    width: 80px;

    height: 26px;

    border-radius: 999px;

    margin-bottom: 1rem;

    background:
      rgba(
        255,
        255,
        255,
        0.05
      );
  }

  &__title {
    width: 80%;

    height: 18px;

    border-radius: 6px;

    margin-bottom: 1rem;

    background:
      rgba(
        255,
        255,
        255,
        0.05
      );
  }

  &__date {
    width: 40%;

    height: 12px;

    border-radius: 6px;

    margin-bottom: 1.5rem;

    background:
      rgba(
        255,
        255,
        255,
        0.05
      );
  }

  &__text {
    width: 100%;

    height: 12px;

    border-radius: 6px;

    margin-bottom: 0.75rem;

    background:
      rgba(
        255,
        255,
        255,
        0.05
      );
  }

  &__textShort {
    width: 70%;

    height: 12px;

    border-radius: 6px;

    background:
      rgba(
        255,
        255,
        255,
        0.05
      );
  }
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 768px) {
  .news {
    &__grid {
      grid-template-columns: 1fr;

      gap: 1rem;
    }
  }

  .blogSkeleton {
    min-height: auto;
  }
}