/* ================= articles Content ===================== */

#articlesSection {
  position: relative;
  margin: 2vw 0 5vw 0;
  flex-direction: column;
}

#articlesContent {
  position: relative;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  width: 75%;
  padding: 0vw 4vw 4vw;
  margin-bottom: 10vw;
}

#articlesNav {
  justify-content: space-between;
  margin: 2vw 0 3vw 0;
}

#prevNavBtnSpan,
#nextNavBtnSpan {
  position: relative;
  width: auto;
  padding: 0 2vw;
  font-size: 1.2vw;
  cursor: pointer;
  color: #86bfff;
}

#prevNavBtnSpan {
  left: -3vw;
}

#nextNavBtnSpan {
  right: -3vw;
}

#articlesContent p {
  text-align: left;
  font-size: 1.3rem;
  /* font-size: 1.2rem; font-size: 1.2vw; clamp(1rem, 1vw, 1.5rem);*/
}

.itemsDiv {
  flex-wrap: wrap;
  justify-content: space-between;
}

.articlesItem {
  position: relative;
  padding: 2vw;
  flex-direction: column;
  margin: 1vw 2vw;
  width: 42%;
  box-sizing: border-box;
}

.articlesItemImg {
  width: 20vw;
  height: auto;
  padding: 1vw 0;
}

#articlesContent .articlesImgPara {
  text-align: center;
}

.articlesLink {
  flex-direction: column;
  text-align: center;
}

.articlesImgHoriz {
  width: 40vw;
  height: auto;
}

.articlesImgVert {
  width: auto;
  height: 40vw;
}

#articles003Dials img {
  width: 40%;
  height: auto;
  padding: 5vw 5vw 0 5vw;
}

.subjectDesc {
  font-size: 1.2vw;
}

.listDiv {
  width: 95%;
  padding: 2vh;
  flex-direction: column;
  border-width: 2px;
}

.listDiv ul {
  list-style-type: square;
  font-size: 1.3rem;
}

/* ================== Mobile =================== */
@media screen and (min-width: 320px) and (max-width: 480px) {
  h3 {
    font-size: 1rem;
  }

  a {
    font-size: 0.9rem;
  }

  #prevNavBtnSpan,
  #nextNavBtnSpan {
    font-size: 2.5vw;
    margin-bottom: 2vw;
  }

  #prevNavBtnSpan {
    left: -2vw;
  }

  #nextNavBtnSpan {
    right: -2vw;
  }

  .itemsDiv {
    flex-wrap: nowrap;
    flex-direction: column;
  }

  .articlesItem {
    width: 80%;
    margin: 2vw 2vw;
  }

  .subjectDesc {
    font-size: 3.5vw;
  }

  .articlesItemImg {
    width: 40vw;
    height: auto;
  }

  .articlesArticleImg {
    width: 90%;
    margin-bottom: 3vw;
  }

  #articles003Dials {
    flex-direction: column;
  }

  #articlesContent p {
    font-size: 0.9rem;
  }

  #articlesContent {
    width: 90%;
  }

  .listDiv {
    width: 89%;
  }

  .listDiv ul li {
    font-size: 0.9rem;
    padding: 0.2vw 0;
    line-height: 5vw;
  }
}