/* section3 css */
.thirdsectionofarticles {
  border: var(--stdborder1);
  padding: 30px 0px;
  color: var(--whitecolor);
  background: linear-gradient(180deg, black, #1f2e4d, #294579);
}
.articlesectionheading {
  font-size: 32px;
  padding: 2vw 7vw;
}
.articlesection {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  grid-gap: 3vw;
  padding: 3vw;
}
.articles {
  border: var(--stdborder3);
  margin: 2px;
  overflow: hidden;
  font-size: 20px;
  background: #18243b;
  border-radius: 20px;
  box-shadow: 5px 7px 20px 0px #009db8;
  transition: all 0.5s ease;
}
.articles:hover {
  transform: scale(1.02);
}
.articlepart1 {
  /* border: var(--stdborder2); */
  overflow: hidden;
  position: relative;
  background: transparent;
  border-radius: 15px;
}
.article1 img {
  width: -webkit-fill-available;
  height: -webkit-fill-available;
  filter: grayscale(1);
  transition: all 0.5s ease;
}
.article1 img:hover {
  filter: grayscale(0);
  scale: 1.03;
}
.articlepublisher {
  position: absolute;
  bottom: 0px;
  left: 15%;
  font-size: inherit;
}
.articleparagraph {
  padding: 30px 5px;
  cursor: pointer;
  color: var(--cadetcolor);
}
.readmorelink {
  padding: 20px 10px;
}
.readmorelink a {
  text-decoration: none;
  color: var(--dwhitecolor);
}

/* responsiveness css */
@media screen and (max-width:1100px) {
  .articlesection {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 4vw 6vw;
  }
  .articleparagraph {
    padding: 20px 5px;
  }
  .articles{
    font-size: 18px;
  }
}
@media screen and (max-width:620px) {
  .articlesection {
    grid-template-columns: repeat(1, 1fr);
    gap: 10vw;
    padding: 11vw;
  }
}
@media screen and (max-width:420px) {
  .articles{
    font-size: 15px;
  }
  .articlesection {
    padding: 5vw;
  }
}