.main-new {
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
}
.main-new__article {
  width: 100%;
  height: 600px;
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
}

.main-new__header {
  width: 100%;
  height: 100%;
}
.main-new__header img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main-new__body {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

.main-new__body {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.7) 60%,
    rgba(0, 0, 0, 0.4) 100%
  );
  color: #fff;
  padding: 1.5rem 2rem;
  border-radius: 0.75rem;
  backdrop-filter: blur(2px);
}

.new__category {
  display: inline-block;
  background-color: var(--color-quaternary);
  color: var(--color-white);
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
}
.main-new__excerpt {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.main-new__title {
  transition: all 0.3s ease-in-out;
  font-size: 1.5rem;
  line-height: 1.4;
  margin: 1rem 0;
}

/* ARTICULOS SECUNDARIOS */

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
  margin-bottom: 4rem;
}

.new__article {
  width: 100%;
}
.new__header {
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  border-radius: 1rem;
  position: relative;
}
.new__header img {
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.new__body {
  margin-top: 0.5rem;
}
.new__title {
  font-weight: 600;
  margin-bottom: 0.5rem;
  transition: all 0.3s ease-in-out;
}
.new__excerpt {
  font-size: 0.75rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.new__article__link:hover h2,
.new__article__link:hover h3 {
  color: var(--color-quaternary);
}
.new__category-float {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
}
