@font-face {
  font-family: regular;
  src: url("/public/fonts/OpenSans-Regular-webfont.woff2");
}

@font-face {
  font-family: light;
  src: url("/public/fonts/Nunito-Light-webfont.woff2");
}

@font-face {
  font-family: bold;
  src: url("/public/fonts/OpenSans-Bold-webfont.woff2");
}

@font-face {
  font-family: second-m;
  src: url("/public/fonts/RobotoSlab-Medium-webfont.woff2");
}

@font-face {
  font-family: second-b;
  src: url("/public/fonts/RobotoSlab-Bold-webfont.woff2");
}

:root {
  --main-color: #358aff;
  --main-color-100: #60a3ff;
  --black-color: #303030;
  --gray-color-100: #999;
  --gray-color-300: #f7f7f7;
  --transition: all .3s;
  --regular: regular;
  --second-m: second-m;
}

.articles-page .articles-list {
  display: Flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.articles-page .articles-list .article {
  width: calc((100% / 3) - 20px);
  padding: 0;
  margin: 0 10px 50px;
}

.articles-page .articles-list .article .content {
  padding: 0px 15px 15px;
  transition: var(--transition);
  border: 1px solid var(--gray-color-300);
  border-radius: 4px;
  position: relative;
  box-shadow: 0px 0px 5px -1px rgba(0, 126, 158, 0.3);
}

.articles-page .articles-list .article .content:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--gray-color-300);
}

.articles-page .articles-list .article .content:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--main-color);
  transform: scale(0);
  transition: var(--transition);
}

.articles-page .articles-list .article .content:hover .image img {
  transform: translate(-50%, -50%) scale(1.1);
}

.articles-page .articles-list .article .content:hover:after {
  transform: scale(1);
}

.articles-page .articles-list .article .content .date {
  background: var(--main-color-100);
  color: #fff;
  font-size: 14px;
  padding: 2px 5px;
  width: auto;
  display: inline-flex;
  transform: translateY(-15px);
  line-height: 19px;
  border-radius: 4px;
}

.articles-page .articles-list .article .content p {
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.articles-page .articles-list .article .content .name {
  font-family: bold;
  font-size: 18px;
  line-height: 26px;
  color: #000;
  margin-bottom: 10px;
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 52px;
  transition: all 350ms ease-out;
}

.articles-page .articles-list .article .content .name:hover {
  color: #2887ef;
}

@media (max-width: 767px) {
  .articles-page .articles-list .article .content {
    margin-bottom: 50px;
  }
}

@media (max-width: 991px) {
  .articles-page .articles-list .article {
    width: calc((100% / 2) - 20px);
  }
}

@media (max-width: 575px) {
  .articles-page .articles-list .article {
    width: 100%;
    margin: 0 0 10px;
  }

  .articles-page .articles-list .article:last-child {
    margin-bottom: 0;
  }

  .articles-page .articles-list .article .content .name {
    min-height: unset;
    display: -webkit-box;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    overflow: unset;
  }
}