­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ .upk-skide-slider .upk-skide-item { height: clamp(28.875rem, 70vw, 43.75rem); } .upk-skide-slider .upk-image-wrap { position: relative; height: 100%; } .upk-skide-slider .upk-image-wrap::before { position: absolute; content: ""; width: 100%; height: 100%; background: #2B2D42; opacity: 0.3; } .upk-skide-slider .upk-content { position: absolute; top: 40%; left: 0; transform: translateY(-40%); max-width: clamp(27rem, 50vw, 33.75rem); overflow: hidden; margin: 0 clamp(1.563rem, 6vw, 4.375rem); } .upk-skide-slider .upk-category { margin: 0 0 20px; display: inline-flex; } .upk-skide-slider .upk-category a { background: #EF233C; padding: 8px 10px; line-height: 1; display: inline-block; font-size: clamp(0.625rem, 1vw, 0.75rem); text-transform: uppercase; font-weight: 700; color: #fff; transition: all 0.3s ease; border-radius: 3px; } .upk-skide-slider .upk-category a:hover { background: #D90429; } .upk-skide-slider .upk-category a + a { margin-left: 5px; } .upk-skide-slider .upk-title { font-size: clamp(1.25rem, 4vw, 2.125rem); line-height: clamp(2.5rem, 7vw, 3.75rem); margin: 0 0 25px; } .upk-skide-slider .upk-title a { color: #edf2f4; background: #2b2d42; display: inline; -webkit-box-decoration-break: clone; padding: 5px 15px 8px; transition: all 0.3s ease; border-radius: 4px; } .upk-skide-slider .upk-title a:hover { color: #EF233C; } .upk-skide-slider .upk-meta { display: inline-flex; flex-wrap: wrap; } .upk-skide-slider .upk-meta .upk-author-img img { border-radius: 100px; } .upk-skide-slider .upk-meta .upk-meta-info { padding-left: 15px; } .upk-skide-slider .upk-meta .upk-author-name { margin-bottom: 3px; } .upk-skide-slider .upk-meta .upk-author-name a { font-size: clamp(0.75rem, 1vw, 0.875rem); font-weight: 700; color: #EDF2F4; text-transform: uppercase; transition: all 0.3s ease; } .upk-skide-slider .upk-meta .upk-author-name a:hover { color: #EF233C; } .upk-skide-slider .upk-meta .upk-date-comments { display: flex; align-items: center; font-size: clamp(0.75rem, 1vw, 0.875rem); color: #dadfe9; text-transform: uppercase; flex-wrap: wrap; } .upk-skide-slider .upk-meta .upk-date-comments > div { position: relative; display: inline-flex; } .upk-skide-slider .upk-meta .upk-date-comments > div:before { content: attr(data-separator); margin: 0 8px; } .upk-skide-slider .upk-meta .upk-date-comments > div:nth-child(1)::before { display: none; } .upk-skide-slider .upk-meta .upk-separator { margin: 0 5px; } .upk-skide-slider .upk-meta .upk-post-time { margin-left: 5px; } .upk-skide-slider .upk-meta .upk-post-time i { margin-right: 2px; } .upk-skide-slider-wrap .upk-img { width: 100%; height: 100%; object-fit: cover; display: block; } .upk-skide-slider-wrap .upk-title { font-weight: 700; } .upk-skide-thumbs { max-width: clamp(15.625rem, 45vw, 31.25rem); position: absolute !important; bottom: clamp(1.563rem, 3vw, 3.125rem); left: clamp(1.563rem, 6vw, 4.375rem); } .upk-skide-thumbs .upk-thumbs-img { margin-bottom: clamp(0rem, 1vw, 0.75rem); } .upk-skide-thumbs .upk-thumbs-img .upk-img { cursor: pointer; border-radius: 10px; } .upk-skide-thumbs .upk-thumbs-content { display: none; } .upk-skide-thumbs .upk-title { font-size: 13px; margin: 0; } .upk-skide-thumbs .upk-title a { color: #edf2f4; } .upk-skide-thumbs .swiper-slide { opacity: 0.3; transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .upk-skide-thumbs .swiper-slide.swiper-slide-next { opacity: 0.5; } .upk-skide-thumbs .swiper-slide.swiper-slide-active { opacity: 1; } .upk-skide-thumbs .swiper-slide:hover { opacity: 1; } .upk-skide-thumbs .swiper-slide:hover.swiper-slide-next { opacity: 1; } .upk-skide-top-stories { max-width: 360px; display: none; flex-wrap: wrap; background: #fff; padding: 40px; border-radius: 10px; position: absolute; left: auto; right: clamp(1.875rem, 6vw, 4.375rem); top: 50%; z-index: 1; transform: translate(0, -50%); } .upk-skide-top-stories .upk-header-title { font-size: 16px; text-transform: uppercase; font-weight: 700; margin-bottom: 30px; } .upk-skide-top-stories .upk-stories-item { display: flex; align-items: center; border-bottom: 1px solid #d2d3d4; padding: 20px 0; } .upk-skide-top-stories .upk-stories-item:nth-last-child(1) { padding-bottom: 0; border: none; } .upk-skide-top-stories .upk-stories-img .upk-img { width: 60px; min-width: 60px; height: 60px; border-radius: 80px; object-fit: cover; } .upk-skide-top-stories .upk-stories-content { padding-left: 15px; } .upk-skide-top-stories .upk-date { font-size: 11px; text-transform: uppercase; margin-bottom: 10px; color: #8D99AE; } .upk-skide-top-stories .upk-post-time { margin-left: 5px; } .upk-skide-top-stories .upk-post-time i { margin-right: 2px; } .upk-skide-top-stories .upk-title { font-size: 15px; margin: 0; } .upk-skide-top-stories .upk-title a { text-decoration: none; color: #2b2d42; transition: all 0.3s ease; } .upk-skide-top-stories .upk-title a:hover { color: #EF233C; } @media (min-width: 768px) { .upk-skide-thumbs .upk-thumbs-content { display: inherit; } } @media (min-width: 1024px) { .upk-skide-top-stories { display: inherit; } }