­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ .upk-elite-carousel .upk-item { position: relative; overflow: hidden; } .upk-elite-carousel .upk-item:hover .upk-main-image::before { opacity: 0; transform: translateY(-200px); } .upk-elite-carousel .upk-item:hover .upk-category-meta-wrap { opacity: 0; transform: translateX(-100px); } .upk-elite-carousel .upk-item-box { position: relative; } .upk-elite-carousel .upk-blog-image-wrapper { position: relative; } .upk-elite-carousel .upk-main-image { overflow: hidden; display: flex; width: 100%; position: relative; } .upk-elite-carousel .upk-main-image::before { position: absolute; content: ""; top: 0; width: 100%; height: 100%; background: linear-gradient(-207deg, #2B2D42 0, rgba(141, 153, 174, 0) 42%); opacity: 1; transform: translateY(0); transition: all 0.9s cubic-bezier(0.17, 0.73, 0.66, 0.99) 0s, z-index 0s step-end, opacity 0.9s ease; } .upk-elite-carousel .upk-main-image .upk-blog-image { object-fit: cover; width: 100%; } .upk-elite-carousel .upk-blog-post-author-wrap { position: absolute; bottom: 0; right: 0; background: #fff; display: flex; align-items: center; } .upk-elite-carousel .upk-author-img-wrap img { border-radius: 50%; } .upk-elite-carousel .upk-author-info-warp { display: flex; flex-direction: column; } .upk-elite-carousel .upk-author-info-warp .author-name .name { text-decoration: none; font-weight: 600; color: #283D58; text-transform: capitalize; letter-spacing: 1.1px; transition: all 0.3s ease-in-out; } .upk-elite-carousel .upk-author-info-warp .author-depertment { color: #8D99AE; letter-spacing: 1px; text-transform: capitalize; } .upk-elite-carousel .upk-title { position: relative; font-weight: 600; line-height: 1.4; padding-right: 50px; margin-top: 0; } .upk-elite-carousel .upk-title a { color: #283D58; transition: all 0.5s ease; } .upk-elite-carousel .upk-title a:hover { color: #EF233C; background-size: 100% 2px; } .upk-elite-carousel .upk-title a:before { position: absolute; content: ""; border: 1px solid #EF233C; width: 37px; right: 0; } .upk-elite-carousel .upk-text-wrap { padding-right: 50px; margin-bottom: clamp(20px, 2vw, 35px); } .upk-elite-carousel .upk-text { font-size: clamp(13px, 1vw, 15px); line-height: 1.5; letter-spacing: 0.5px; color: #8D99AE; } .upk-elite-carousel .upk-text p { margin: 0; } .upk-elite-carousel .upk-blog-post-meta { display: flex; align-items: center; } .upk-elite-carousel .upk-blog-post-meta .author { width: 40px; border-radius: 30px; } .upk-elite-carousel .upk-blog-post-meta .author-name { text-decoration: none; font-weight: 600; } .upk-elite-carousel .upk-category-meta-wrap { position: absolute; left: 20px; top: 20px; opacity: 1; transform: translateX(0); transition: all 0.8s cubic-bezier(0.17, 0.73, 0.66, 0.99) 0s, z-index 0s step-end, opacity 0.6s ease; } .upk-elite-carousel .upk-category { display: flex; margin-right: 10px; } .upk-elite-carousel .upk-category a { font-size: 14px; color: #dddfe2; font-weight: 600; padding: 4px 8px; display: flex; line-height: 1; border-radius: 3px; transition: all 0.3s ease; } .upk-elite-carousel .upk-category a + a { margin-right: 5px; } .upk-elite-carousel .upk-reading-time, .upk-elite-carousel .upk-post-time, .upk-elite-carousel .upk-date { font-size: 14px; color: #ffffff; display: flex; line-height: 1; } .upk-elite-carousel .upk-post-time i { margin-left: 2px; } .upk-elite-carousel .upk-blog-image { width: 100%; height: 100%; } .upk-elite-carousel .upk-blog-post-author-wrap { padding: 20px 0 20px 20px; } .upk-elite-carousel .upk-author-img-wrap img { width: 38px; } .upk-elite-carousel .upk-author-info-warp { padding-right: 15px; } .upk-elite-carousel .upk-author-info-warp .author-name { margin-bottom: 3px; } .upk-elite-carousel .upk-author-info-warp .author-name .name { font-size: 14px; } .upk-elite-carousel .upk-author-info-warp .author-depertment { font-size: 12px; } .upk-elite-carousel .upk-blog-box-content { padding-top: 30px; padding-left: 30px; } .upk-elite-carousel .upk-title { margin-bottom: clamp(10px, 2vw, 20px); font-size: clamp(16px, 2vw, 20px); } .upk-elite-carousel .upk-title a:before { top: 12px; } .upk-elite-carousel .upk-date-reading-wrap > div { position: relative; display: inline-flex; } .upk-elite-carousel .upk-date-reading-wrap > div:before { content: attr(data-separator); margin: 0 5px; } .upk-elite-carousel .upk-date-reading-wrap > div:nth-child(1)::before { display: none; } .upk-global-link-yes .upk-elite-carousel .upk-item:hover { cursor: pointer; } .upk-item-match-height--yes .upk-elite-carousel .swiper-slide { height: initial; }