@import url('https://fonts.googleapis.com/css2?family=Exo:wght@700&display=swap');

.news-and-updates__container--multiple {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 24px;
}

.news-and-updates__container--single {
  display: grid;
  grid-gap: 24px;
}

.news-and-updates__container--two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 24px;
}

.news-and-updates__item {
  display: grid;
  grid-template-columns: auto auto;
  background-color: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(0,47,98,0.06), 0 1px 1px 0 rgba(0,0,0,0.1), 0 35px 70px -50px rgba(50,50,93,0.14), 0 20px 40px -20px rgba(0,0,0,0.1);
}

.news-and-updates__left {
  position: relative;
}

.news-and-updates__label {
  position: absolute;
  top: 4px;
  left: 4px;
  background-color: #00467f;
  color: #f5f6f7;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  padding: 8px;
}

.news-and-updates__image {
  width: 224px;
  height: 100%;
  padding: 4px;
}

.news-and-updates__image img {
    width: 100%;
    height: 225px;
    object-fit: cover;
}

.news-and-updates__right {
  display: flex;
  flex-flow: column;
  padding: 24px 24px 20px 24px;
}

.news-and-updates__heading {
  color: #3C4853;
  font-family: Exo;
  font-size: 18px;
  font-weight: bold;
  line-height: 26px;
  margin-bottom: 6px;
}

.news-and-updates__secondary-text {
  flex-grow: 1;
  color: #3C4853;
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 16px;
}

.news-and-updates__right button {
  color: #0895f0;
  font-family: Exo;
  font-size: 14px;
  line-height: 24px;
  padding: 8px 16px;
  background-color: rgba(0,70,127,.05);
  border: 0;
  border-radius: 0;
}

@media (min-width: 576px) and (max-width: 1100px) {
  .news-and-updates__container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-row-gap: 24px;
  }
  
  .news-and-updates__container--multiple {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-row-gap: 24px;
  }
}

@media (max-width: 576px) {
  .news-and-updates__container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-row-gap: 8px;
    margin-top: 16px;
  }

  .news-and-updates__item {
    grid-template-columns: auto;
    grid-template-rows: .5fr 1fr;
  }

  .news-and-updates__image {
    width: 100%;
    height: 200px;
  }

  .news-and-updates__label {
    top: 0;
  }

  .news-and-updates__heading {
    font-size: 14px;
    line-height: 22px;
  }

  .news-and-updates__secondary-text {
    line-height: 22px;
  }

  .news-and-updates__right button {
    width: 100%;
  }
  .news-and-updates__left {
    height: 200px;
}