/** Type scale System */
/** 38px, 30px, 24px, 19px, 15px, 12.5px, 10px, 8px, 6px, 5px  */

/** Spacing System */
/** 160px, 96px, 80px, 64px, 48px, 40px, 32px, 24px, 16px, 12px, 8px, 4px, 2px */

/* TODO */
/*! The Background color is experimental */

/* Top news section starts */

.news-container {
  position: relative;
}

.news {
  display: flex;
  width: 100%;
  gap: var(--spacing-12px);
  overflow-x: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.news::-webkit-scrollbar {
  height: 0;
}

.news::-webkit-scrollbar-track {
  background: #fff;
}

.news::-webkit-scrollbar-thumb {
  border-radius: var(--spacing-160px);
  background: #ccc;
}

.news::-webkit-scrollbar-thumb:hover {
  background: #999;
}

.news-card {
  position: relative;
  flex-shrink: 0;
  width: var(--spacing-300px);
  /* padding-bottom: var(--spacing-12px); */
  border-radius: var(--spacing-4px);
  overflow: hidden;
}

.news-card a {
  width: 100%;
  text-decoration: none;
  color: var(--text-color-light);
}

.news-card__img-container {
  width: 100%;
  height: var(--spacing-160px);
}

.news-card__img-fallback {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0.6)
    ),
    url("https://images.pexels.com/photos/10464454/pexels-photo-10464454.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2");
  background-size: cover;
  background-position: center;
  position: relative;
}

.news-card__img-fallback::before {
  content: "NewsNow";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--fs-30px);
  font-weight: 600;
  color: var(--text-primary);
}

.news-card__img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: var(--spacing-4px);
}

.news-card__text-container {
  padding-top: var(--spacing-8px);
}

.news-card__author {
  font-size: var(--fs-15px);
  color: #333;
}

.news-card__title {
  font-size: var(--fs-19px);
  margin-top: var(--spacing-8px);
  margin-bottom: var(--spacing-4px);
  color: #333;
}

.news-card__description {
  font-size: var(--fs-15px);
  color: #555;
  line-height: 1.3;
  font-weight: 500;
}

.news__btn {
  position: absolute;
  top: 50%;
  height: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-38px);
  background-color: #fff;
  opacity: 0.8;
  transform: translateY(-50%);
  transition: border 0.3s;
}

.news__btn .btn__icon {
  background-color: none;
  color: #888;
  transition: none;
}

.news__btn--left {
  left: 0;
  border-radius: 0 var(--spacing-4px) var(--spacing-4px) 0;
}

.news__btn--right {
  right: 0;
  border-radius: var(--spacing-4px) 0 0 var(--spacing-4px);
}

.action-container {
  position: absolute;
  top: var(--spacing-8px);
  right: var(--spacing-8px);
  display: flex;
  gap: var(--spacing-8px);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.action__btn {
  font-size: var(--fs-19px);
  /* background: linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0,.5)); */
  background-color: var(--bg-primary-tint);
  color: var(--text-primary);
  border-radius: var(--spacing-4px);
  padding: var(--spacing-4px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Top news section ends */