:root {
    --recent-post-bgcolor: rgba(255,255,255,0.5);
    --article-content-bgcolor: #49b1f5;
    --recent-post-arrow: #fff;
    --recent-post-cover-shadow: #fff;
    --recent-post-transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17);
  }
  .darkmode--activated {
    --recent-post-bgcolor: rgba(35,35,35,0.5);
    --article-content-bgcolor: #99999a;
    --recent-post-arrow: #37e2dd;
    --recent-post-cover-shadow: #232323;
  }
  .recent-posts {
    padding: 0 15px 0 15px;
    height: fit-content;
  }
  .recent-posts .recent-post-item {
    margin-bottom: 15px;
    width: 100%;
    background: var(--recent-post-bgcolor);
    overflow: hidden;
    border-radius: 15px;
  }
  .recent-posts .recent-post-item .recent-post-content {
    display: flex;
    background: var(--recent-post-bgcolor);
    position: relative;
  }
  .recent-posts .recent-post-item .recent-post-content .recent-post-cover {
    display: flex;
    background: transparent;
  }
  .recent-posts .recent-post-item .recent-post-content .recent-post-info {
    display: flex;
    background: transparent;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .recent-posts .recent-post-item .recent-post-content .recent-post-info .article-title {
    height: 50%;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: flex-end;
    flex-direction: column;
  }
  .recent-posts .recent-post-item .recent-post-content .recent-post-info .article-title .article-title-link {
    color: var(--text-highlight-color);
    transition: all 0.2s ease-in-out;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .recent-posts .recent-post-item .recent-post-content .recent-post-info .article-title .article-title-link:hover {
    color: #5bacace8;
  }
  .recent-posts .recent-post-item .recent-post-content .recent-post-info .recent-post-meta {
    height: 50%;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
  }
  .recent-posts .recent-post-item .recent-post-content .recent-post-info .recent-post-meta .article-meta-wrap {
    color: #969797;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .recent-posts .recent-post-item .recent-post-content .recent-post-info .recent-post-meta .article-meta-wrap a {
    color: var(--text-highlight-color);
    transition: all 0.2s ease-in-out;
    color: #969797;
  }
  .recent-posts .recent-post-item .recent-post-content .recent-post-info .recent-post-meta .article-meta-wrap a:hover {
    color: #5bacace8;
  }
  .recent-posts .recent-post-item .recent-post-content .article-content {
    display: flex;
    text-align: center;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .recent-posts .recent-post-item .recent-post-content .article-content .article-content-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #fff;
    text-shadow: 1px 2px 3px #000;
  }
  .recent-posts .recent-post-item .recent-post-content .article-content .article-content-text::before {
    content: "❝";
    font-size: 20px;
  }
  .recent-posts .recent-post-item .recent-post-content .article-content .article-content-text::after {
    content: "❞";
    font-size: 20px;
  }
  .recent-posts .recent-post-item.ads-wrap {
    display: block !important;
    height: auto !important;
  }
  @media screen and (min-width: 1069px) {
    .recent-posts {
      padding: 0 15px 0 15px;
    }
    .recent-posts .recent-post-item .recent-post-content {
      position: relative;
      height: 200px;
      width: 100%;
      transition: var(--recent-post-transition);
    }
    .recent-posts .recent-post-item .recent-post-content:hover .recent-post-cover-shadow {
      width: 10.1%;
      transition: var(--recent-post-transition);
    }
    .recent-posts .recent-post-item .recent-post-content:hover .recent-post-cover {
      width: 10%;
      transition: var(--recent-post-transition);
    }
    .recent-posts .recent-post-item .recent-post-content:hover .article-content {
      width: calc(30% + 80px);
      transition: var(--recent-post-transition);
    }
    .recent-posts .recent-post-item .recent-post-content:hover .article-content .article-content-text {
      opacity: 1;
    }
    .recent-posts .recent-post-item .recent-post-content:hover .recent-post-arrow {
      transition: var(--recent-post-transition);
    }
    .recent-posts .recent-post-item .recent-post-content .recent-post-cover-shadow {
      z-index: 1;
      transition: var(--recent-post-transition);
      position: absolute;
      height: 200px;
      width: 40%;
    }
    .recent-posts .recent-post-item .recent-post-content .recent-post-cover {
      height: 200px;
      width: 40%;
      transition: var(--recent-post-transition);
    }
    .recent-posts .recent-post-item .recent-post-content .recent-post-cover img {
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
    .recent-posts .recent-post-item .recent-post-content .recent-post-info {
      height: 200px;
      width: calc(60% - 80px);
    }
    .recent-posts .recent-post-item .recent-post-content .recent-post-info .article-title {
      margin: 0px 40px;
      font-size: 24px;
    }
    .recent-posts .recent-post-item .recent-post-content .recent-post-info .article-title .article-title-link {
      -webkit-line-clamp: 2;
    }
    .recent-posts .recent-post-item .recent-post-content .recent-post-info .recent-post-meta {
      margin: 0px 20px;
    }
    .recent-posts .recent-post-item .recent-post-content .recent-post-info .recent-post-meta .article-meta-wrap {
      font-size: 12px;
      -webkit-line-clamp: 3;
    }
    .recent-posts .recent-post-item .recent-post-content .article-content {
      height: 200px;
      width: 90px;
      background: var(--article-content-bgcolor);
      transition: var(--recent-post-transition);
    }
    .recent-posts .recent-post-item .recent-post-content .article-content .article-content-text {
      -webkit-line-clamp: 4;
      transition: var(--recent-post-transition);
      opacity: 0;
    }
    .recent-posts .recent-post-item .recent-post-content .recent-post-arrow {
      transition: var(--recent-post-transition);
      display: block;
      position: absolute;
      height: 20px;
      width: 8px;
      background: var(--recent-post-arrow);
    }
    .recent-posts .recent-post-item .recent-post-content.both .recent-post-cover-shadow,
    .recent-posts .recent-post-item .recent-post-content.right .recent-post-cover-shadow {
      left: 0;
      background: linear-gradient(to left, var(--recent-post-cover-shadow), transparent);
    }
    .recent-posts .recent-post-item .recent-post-content.both .recent-post-cover,
    .recent-posts .recent-post-item .recent-post-content.right .recent-post-cover {
      order: 1;
    }
    .recent-posts .recent-post-item .recent-post-content.both .recent-post-info,
    .recent-posts .recent-post-item .recent-post-content.right .recent-post-info {
      order: 2;
    }
    .recent-posts .recent-post-item .recent-post-content.both .article-content,
    .recent-posts .recent-post-item .recent-post-content.right .article-content {
      order: 3;
      clip-path: polygon(0 50%, 80px 0, 100% 0, 100% 100%, 80px 100%);
    }
    .recent-posts .recent-post-item .recent-post-content.both .article-content .article-content-text,
    .recent-posts .recent-post-item .recent-post-content.right .article-content .article-content-text {
      margin: 20px 40px 20px 80px;
    }
    .recent-posts .recent-post-item .recent-post-content.both .recent-post-arrow,
    .recent-posts .recent-post-item .recent-post-content.right .recent-post-arrow {
      order: 4;
      left: calc(100% - 80px);
      top: calc(50% - 10px);
      clip-path: polygon(0 10px, 8px 0, 8px 20px);
    }
    .recent-posts .recent-post-item .recent-post-content.both:hover .recent-post-arrow,
    .recent-posts .recent-post-item .recent-post-content.right:hover .recent-post-arrow {
      left: calc(100% - 40px);
    }
    .recent-posts .recent-post-item .recent-post-content.left .recent-post-cover-shadow {
      right: 0;
      background: linear-gradient(to right, var(--recent-post-cover-shadow), transparent);
    }
    .recent-posts .recent-post-item .recent-post-content.left .recent-post-cover {
      order: 4;
    }
    .recent-posts .recent-post-item .recent-post-content.left .recent-post-info {
      order: 3;
    }
    .recent-posts .recent-post-item .recent-post-content.left .article-content {
      order: 2;
      clip-path: polygon(100% 50%, calc(100% - 80px) 100%, 0 100%, 0 0, calc(100% - 80px) 0);
    }
    .recent-posts .recent-post-item .recent-post-content.left .article-content .article-content-text {
      margin: 20px 80px 20px 40px;
    }
    .recent-posts .recent-post-item .recent-post-content.left .recent-post-arrow {
      order: 1;
      left: 72px;
      top: calc(50% - 10px);
      clip-path: polygon(0 0, 8px 10px, 0 20px);
    }
    .recent-posts .recent-post-item .recent-post-content.left:hover .recent-post-arrow {
      left: 32px;
    }
  }
  @media screen and (min-width: 572px) and (max-width: 1068px) {
    .recent-posts {
      padding: 0 15px 0 15px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }
    .recent-posts .recent-post-item {
      border-radius: 15px;
      overflow: hidden;
      width: 47%;
      margin: 0px 3% 20px 0px;
    }
    .recent-posts nav#pagination {
      width: 100%;
    }
  }
  @media screen and (max-width: 572px) {
    .recent-posts {
      padding: 0 15px 0 15px;
    }
    .recent-posts .recent-post-item {
      border-radius: 15px;
      overflow: hidden;
    }
  }
  @media screen and (max-width: 1068px) {
    .recent-posts .recent-post-item .recent-post-content {
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: center;
      max-height: 350px;
      height: auto;
      width: 100%;
    }
    .recent-posts .recent-post-item .recent-post-content .recent-post-cover {
      width: 100%;
      height: 200px;
      clip-path: polygon(0 130px, 0 0, 100% 0, 100% 130px, 50% 100%);
    }
    .recent-posts .recent-post-item .recent-post-content .recent-post-cover img {
      height: 300px;
      width: 100%;
      object-fit: cover;
    }
    .recent-posts .recent-post-item .recent-post-content .recent-post-info {
      height: 150px;
      width: 100%;
      padding: 0px 25px 5px 25px;
    }
    .recent-posts .recent-post-item .recent-post-content .recent-post-info .article-title {
      margin: 0px 40px;
      font-size: 18px;
    }
    .recent-posts .recent-post-item .recent-post-content .recent-post-info .article-title .article-title-link {
      -webkit-line-clamp: 2;
    }
    .recent-posts .recent-post-item .recent-post-content .recent-post-info .recent-post-meta {
      margin: 0px 20px;
    }
    .recent-posts .recent-post-item .recent-post-content .recent-post-info .recent-post-meta .article-meta-wrap {
      font-size: 12px;
      -webkit-line-clamp: 3;
    }
    .recent-posts .recent-post-item .recent-post-content .article-content {
      position: absolute;
      height: 200px;
      width: 100%;
      background: rgba(25,25,25,0.5);
      clip-path: polygon(0 130px, 0 0, 100% 0, 100% 130px, 50% 100%);
    }
    .recent-posts .recent-post-item .recent-post-content .article-content .article-content-text {
      -webkit-line-clamp: 3;
      font-size: 16px;
      margin: 0px 25px 30px 25px;
    }
    .recent-posts .recent-post-item .recent-post-content .recent-post-arrow {
      display: block;
      background: var(--article-content-bgcolor);
      position: absolute;
      height: 10px;
      width: 20px;
      clip-path: polygon(0 0, 100% 0, 50% 100%);
      top: 20px;
    }
  }