.news {
  padding-top: 32px;
  padding-bottom: 32px;
  background-color: #f2f2f2;
}

.news .news__list {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 24px;
}

.news .news__main-image {
  width: 100%;
  height: 264px;
  margin: 0;
}

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

.news .news__date {
  font-size: var(--carec-news-date-font-size, 12px);
  color: #9ca3af;
}

.news .news__title {
  font-weight: 500;
  text-decoration: none;
  color: var(--text-color);
}

.news .news__title:hover,
.news .news__main .news__title:hover {
  color: var(--color-secondary);
}

.news .news__description {
  margin-top: 0;
  margin-bottom: 0;
  font-size: var(--carec-news-preview-font-size, 12px);
  color: #6b7280;
}

.news .news__other {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}

.news .news__other li,
.news .news__main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  background-color: #ffffff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.news .news__main {
  color: #ffffff;
  background-color: var(--color-primary);
}

.news .news__main .news__date,
.news .news__main .news__title,
.news .news__main .news__description {
  color: inherit;
}

@media (min-width: 992px) {
  .news .news__list {
    flex-direction: row;
    gap: 24px;
  }

  .news .news__main,
  .news .news__other {
    flex: 1 0 0;
  }

  .news .news__main-image {
    height: 280px;
  }
}