.wrap-post .post-thumbnail {
  /*width: 100%;*/
  aspect-ratio: 4 / 3;
  background-image: url('/site/assets/images/default_image.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  border-radius: var(--border-radius-16);
}

.wrap-post .wrap-post-information {
  padding: var(--mp16);
  display: flex;
  flex-direction: column;
  /*flex: 1 1 auto;*/
  min-height: 0;
}

.wrap-post .wrap-post-information .post-category {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mp8);
  padding: var(--mp8) 0;
  margin: 0;
}

.wrap-post .wrap-post-information .post-category span {
  display: inline-flex;
  align-items: center;
  border: 1px solid #E5E7EB;
  border-radius: var(--border-radius-6);
  padding: var(--mp4) var(--mp8);
  color: var(--text-default);
  font-weight: var(--font-weight-400);
  font-size: 0.857rem;
  line-height: 1.143rem;
}

.wrap-post .wrap-post-information .post-information {
  margin-top: var(--mp8);
  display: flex;
  align-items: center;
}

.wrap-post .wrap-post-information .post-information .avatar {
  width: var(--font-size-40);
  height: var(--font-size-40);
  border-radius: 50%;
}

.wrap-post .wrap-post-information .post-information .info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 50%;
  padding-left: var(--mp8);
}

.wrap-post .wrap-post-information .post-information .info .name {
  font-weight: var(--font-weight-600);
  font-size: 1rem;
  line-height: 1.429rem;
  letter-spacing: 0;
  color: #111827;
}

.wrap-post .wrap-post-information .post-information .info .date {
  font-weight: var(--font-weight-500);
  font-size: 1rem;
  line-height: 1.429rem;
  letter-spacing: 0;
  color: #4B5563;
}

.wrap-post .wrap-post-information .post-information .meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  margin-left: auto;
  width: 40%;
}

.wrap-post .wrap-post-information .post-information .meta .last-view-at {
  font-weight: var(--font-weight-600);
  font-size: 1rem;
  line-height: 1.429rem;
    letter-spacing: 0;
  text-align: right;
    color: #4C1D95;
}

.wrap-post .wrap-post-information .post-information .meta .views {
  font-weight: var(--font-weight-500);
  font-size: 1rem;
  line-height: 1.429rem;
    letter-spacing: 0;
  text-align: right;
    color: #4B5563;
}

.wrap-post .wrap-post-information .post-title {
  margin-top: var(--font-size-18); /* 18px */
   color: #111827;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}

.wrap-post .wrap-post-information .post-title .title {
  display: block;
  width: calc(100% - var(--mp26)); /* 26px */
}

.wrap-post .wrap-post-information .post-title a {
  color: inherit;
  text-decoration: none;
  font-weight: var(--font-weight-700);
  font-size: 1.714rem; /* ~22.3px */
  line-height: 2.286rem; /* ~29.7px */
  letter-spacing: 0;
}

.wrap-post .wrap-post-information .post-title a:hover {
  color: inherit;
}

.wrap-post .wrap-post-information .post-title .svg-icon-arrow-up-right {
  position: absolute;
  right: 0.154rem; /* 2px */
  top: 0.154rem;   /* 2px */
  width: var(--font-size-24);  /* 24px */
  height: var(--font-size-24); /* 24px */
  -webkit-mask-image: url('/site/assets/images/arrow-up-right.svg');
  mask-image: url('/site/assets/images/arrow-up-right.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
    background-color: #111827;
}

.wrap-post {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-start;
  border-bottom-left-radius: var(--border-radius-16);
  border-bottom-right-radius: var(--border-radius-16);
}

.post-footer {
  margin-top: auto;
  padding-top: 1rem;
}

.wrap-post .wrap-post-information .post-description {
  margin-top: var(--mp4); /* 4px */
  font-weight: var(--font-weight-400);
  font-size: 1.143rem;   /* ~14.86px */
  line-height: 1.714rem; /* ~22.3px */
  letter-spacing: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
    color: #4B5563;
}

.wrap-post .wrap-post-information .post-social {
  margin-top: var(--font-size-18); /* 18px */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--mp10); /* 10px */
}

.wrap-post .wrap-post-information .post-social .icon {
  width: var(--font-size-24);
  height: var(--font-size-24);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
    background-color: #4B5563;
}

.wrap-post .wrap-post-information .post-social .item {
  display: inline-flex;
  align-items: center;
  gap: 0.462rem; /* 6px */
  font-size: 1rem;
  color: #4B5563;
  font-weight: var(--font-weight-500);
  line-height: 1.429rem;
  letter-spacing: 0;
}

.wrap-post .wrap-post-information .post-social .icon.linear-like-heart {
  -webkit-mask-image: url('/site/assets/images/linear-like-heart.svg');
  mask-image: url('/site/assets/images/linear-like-heart.svg');
}
.wrap-post .wrap-post-information .post-social .icon.linear-messages-conversation-chat-dots {
  -webkit-mask-image: url('/site/assets/images/linear-messages-conversation-chat-dots.svg');
  mask-image: url('/site/assets/images/linear-messages-conversation-chat-dots.svg');
}
.wrap-post .wrap-post-information .post-social .icon.linear-messages-conversation-square-share-line {
  -webkit-mask-image: url('/site/assets/images/linear-messages-conversation-square-share-line.svg');
  mask-image: url('/site/assets/images/linear-messages-conversation-square-share-line.svg');
}

.wrap-post.layout-horizontal {
  display: flex;
  flex-direction: row-reverse;
  align-items: stretch;
  gap: var(--mp32);             /* 32px */
  margin: auto;
  padding: var(--mp64) 0;       /* 64px 0 */
}

/*@media (min-width: 640px) {*/
/*    .wrap-post.layout-horizontal {*/
/*        margin-right: -4rem;*/
/*    }*/
/*}*/

/*@media (min-width: 960px) {*/
/*    .wrap-post.layout-horizontal {*/
/*        margin-right: -6rem;*/
/*    }*/
/*}*/

/*@media (min-width: 1200px) {*/
/*    .wrap-post.layout-horizontal {*/
/*        margin-right: -8rem;*/
/*    }*/
/*}*/

/*@media (min-width: 1600px) {*/
/*    .wrap-post.layout-horizontal {*/
/*        margin-right: -9.846rem;*/
/*    }*/
/*}*/

.wrap-post:hover {
  box-shadow: 2px 4px 20px 0px #0000000F;
  transition: box-shadow 0.3s ease;
}

.wrap-post.layout-horizontal:hover {
  box-shadow: none;
}

.wrap-post.layout-horizontal .post-thumbnail {
  flex: 1;
  width: 60%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: var(--border-radius-16);
  max-height: 46.769rem; /* 608px */
}

.wrap-post.layout-horizontal .wrap-post-information .post-social,
.wrap-post.layout-horizontal .wrap-post-information .post-information {
  max-width: 27.692rem; /* 360px */
}

.wrap-post.layout-horizontal .wrap-post-information .post-title {
  -webkit-line-clamp: initial;
}

.wrap-post.layout-horizontal .post-title .title {
  font-weight: var(--font-weight-700);
  font-size: 3.692rem;   /* 48px */
  line-height: 3.692rem; /* 48px */
  letter-spacing: 0%;
}

.wrap-post.layout-horizontal .wrap-post-information {
  padding: 0;
  width: 40%;
  margin: auto 0;
}

.wrap-post.layout-horizontal .post-title a {
  font-size: 2rem;
  line-height: 2.5rem;   /* ~32.5px */
}

.wrap-post.layout-horizontal .post-description {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  text-overflow: unset;
  font-size: 1.125rem;  /* ~14.6px */
  line-height: 1.75rem; /* ~22.75px */
  color: #374151;
  margin-top: var(--mp12); /* 12px */
  max-width: 36.923rem; /* 480px */
}

@media (max-width: 1200px) {
  .wrap-post.layout-horizontal {
    flex-direction: column;
  }

  .wrap-post.layout-horizontal .post-thumbnail,
  .wrap-post.layout-horizontal .wrap-post-information {
    width: 100%;
  }

  .wrap-post.layout-horizontal .wrap-post-information .post-social,
  .wrap-post.layout-horizontal .wrap-post-information .post-information,
  .wrap-post.layout-horizontal .post-description {
    max-width: 100%;
  }
}