File Content: _list.scss .pxl-post-list{ &.layout-post-list-1{ .post-image{ img{ width: 100%; object-fit: cover; @media (max-width: $sm_max) { max-height: 450px; } } } .item-content{ background-color: #FAFAFA; padding: 35px 50px 50px; @media (max-width: $xs_max) { font-size: 30px; padding: 25px 20px 30px; } } .item-title{ font-size: 45px; line-height: 50px; margin-bottom: 9px; a{ color: inherit; position: relative; transition: all 300ms ease-in-out; text-decoration: underline transparent 2px; &:hover{ text-decoration: underline $heading_color 2px; } } @media (max-width: $sm_max) { font-size: 40px; line-height: 45px; } @media (max-width: $xs_max) { font-size: 32px; line-height: 37px; } } .item-excerpt{ font-size: 18px; line-height: 24px; max-width: 350px; @media (max-width: $xs_max) { font-size: 16px; line-height: 22px; } } .item-post-metas{ display: flex; justify-content: space-between; margin-top: 3px; @media (max-width: $xs_max) { margin-top: 12px; } .meta-item { color: $body_color; font-size: 16px; line-height: 1; font-weight: 500; text-transform: uppercase; a{ @include multiline-hover-underline($body_color); } } .post-author{ position: relative; margin-left: 30px; &::before{ content: ""; position: absolute; left: -15px; top: 50%; transform: translateY(-50%) rotate(35deg); width: 1px; height: 15px; background-color: $body_color; } } } .pxl-button-more{ width: 60px; height: 60px; background-color: $primary_color; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; i{ font-size: 24px; } &:hover{ color: initial; i{ animation: toTopFromBottom 0.4s forwards; } } @media (max-width: $xs_max) { width: 45px; height: 45px; i{ font-size: 20px; } } } } &.layout-post-list-2{ .list-item{ background-color: #292D32; } .item-title{ font-size: 35px; line-height: 41px; font-weight: 500; color: #fff; margin-bottom: 18px; @include text-truncate-multi-line(35px, 41px, 2); a{ color: inherit; position: relative; transition: all 300ms ease-in-out; text-decoration: underline transparent 2px; &:hover{ text-decoration: underline #fff 2px; } } @media (max-width: $sm_max) { @include text-truncate-multi-line(30px, 35px, 2); } } .item-excerpt{ font-size: 18px; line-height: 24px; max-width: 318px; @media (max-width: $xs_max) { font-size: 16px; line-height: 22px; } } .item-content{ padding: 35px 15px 45px 60px; display: flex; flex-direction: column; justify-content: space-between; @media (max-width: $lg_max) { padding: 35px 15px 45px 45px; gap: 20px; } @media (max-width: $sm_max) { padding: 30px 15px 35px 45px; } @media (max-width: $xs_max) { padding: 30px 35px 30px 35px; } } .item-post-metas{ .meta-item { color: $body_color; font-size: 16px; line-height: 1; font-weight: 500; text-transform: uppercase; a{ @include multiline-hover-underline($body_color); } } .post-author{ position: relative; margin-left: 30px; &::before{ content: ""; position: absolute; left: -15px; top: 50%; transform: translateY(-50%) rotate(35deg); width: 1px; height: 15px; background-color: $body_color; } } } .item-featured{ padding: 10px 25px 10px 31px; img{ width: 100%; } @media (max-width: $xs_max) { padding: 15px 35px 20px 35px; } } } } Submit