.HomeNews {
  position: relative;
  background-color: var(--colorBrand);
  padding-block: clamp(3rem, 8vw, 6.5rem);
}

.HomeNews:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 80%;
  background: linear-gradient(360deg, var(--colorBrand) 50%, rgba(36, 109, 191, 0) 100%);
  bottom: 0;
  left: 0;
}

.HomeNews-frame {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-areas: "title "
 "list"
 "btn";
  gap: 3rem;
  align-items: center;
  z-index: 2;
}

@media (min-width: 64.01rem) {
  .HomeNews-frame {
    grid-template-areas: "title btn"
 "list list";
    gap: clamp(3rem, 5vw, 6rem) 2rem;
    justify-content: flex-start;
  }
}

.HomeNews-title {
  grid-area: title;
  color: var(--colorWhite);
  text-align: center;
  margin-bottom: 0;
}

@media (min-width: 64.01rem) {
  .HomeNews-title {
    text-align: left;
  }
}

.HomeNews-more {
  grid-area: btn;
  justify-self: center;
}

@media (min-width: 64.01rem) {
  .HomeNews-more {
    justify-self: flex-end;
  }
}

.HomeNews-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.HomeNews-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  mix-blend-mode: soft-light;
}

.HomeNews-list {
  position: relative;
  grid-area: list;
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 32.01rem) {
  .HomeNews-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

@media (min-width: 64.01rem) {
  .HomeNews-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 4rem clamp(1rem, 2vw, 3.75rem);
  }
}

/*# sourceMappingURL=home-news.min.css.map */