@import url("root.css");
:root {
  --card-news-width: 17em;
  --card-news-totalWidth: -155em;
  --card-number: -5;
}
.news {
  position: relative;
  width: 100%;
  color: var(--text-color);
  margin-top: 30em;
  overflow:hidden;
}

.flex-card {
  display: grid;
  grid-template-columns:repeat(4,1fr);
  justify-content:space-between;
}

.card-news {
  width: var(--card-news-width);
}

    .card-news:hover .card-content {
        transform: rotateY(0);
        
    }

    .card-news:hover .card-front .card-img {
        top: -2em;
    }

    .card-news:hover .card-front .card-heading {
        top: -2.2em;
        left: 3em;
        right: -0.8em;
    }
    .card-news:hover .card-front {
        background: linear-gradient( 90deg, rgba(28, 108, 212, 1) 32%, rgba(30, 179, 210, 1) 100% );
    }
    .card-news:hover .card-news-text {
        color:white;
    }

.card-news-content {
  height: 21vh;
}

.card-news-heading {
  padding-block: 0.5em;
  padding-left:1.5em;
}

.card-news-text {
    padding-top: 0.8em;
    overflow: hidden;
    font-size: 15px;
    text-transform: none;
}

.card-news-img {
  width: 37px;
}

@media (max-width: 900px) {
  .news {
    margin-top: 17em;
    background: linear-gradient(
      90deg,
      rgba(28, 108, 212, 1) 32%,
      rgba(30, 179, 210, 1) 100%
    );
  }
}