­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ .upk-pholox-slider .upk-item:hover .upk-img { transform: scale(1.2); } .upk-pholox-slider .upk-img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform 2s cubic-bezier(0.215, 0.61, 0.355, 1); } .upk-pholox-slider .upk-img-wrap { overflow: hidden; position: relative; width: 100%; } .upk-pholox-slider .upk-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); line-height: 1; } .upk-pholox-slider .upk-play-btn a { background: #fff; display: inline-block; text-align: center; color: #2B2D42; border-radius: 100px; } .upk-pholox-slider .upk-title { font-weight: 700; text-transform: capitalize; } .upk-pholox-slider .upk-title a { color: #2B2D42; } .upk-pholox-slider .upk-title a:hover { color: #D90429; } .upk-pholox-slider .upk-category a + a { margin-left: 5px; } .upk-pholox-slider .upk-category a, .upk-pholox-slider .upk-author a { text-decoration: none; transition: color 0.3s ease-in; } .upk-pholox-slider .upk-category a:hover, .upk-pholox-slider .upk-author a:hover { color: #D90429; } .upk-pholox-slider .upk-category a, .upk-pholox-slider .upk-meta { font-size: 0.75rem; color: #4a5362; text-transform: uppercase; } .upk-pholox-slider .upk-play-btn a { transform: scale(1); transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); } .upk-pholox-slider .upk-play-btn a:hover { transform: scale(1.2); background: #D90429; color: #fff; } .upk-pholox-slider .upk-main-slider { display: flex; flex-direction: row; height: 100%; position: relative; margin-bottom: clamp(0.938rem, 4vw, 1.875rem); } .upk-pholox-slider .upk-main-slider .upk-item { position: relative; display: block; flex-direction: row-reverse; } .upk-pholox-slider .upk-main-slider .upk-img-wrap { height: 250px; } .upk-pholox-slider .upk-main-slider .upk-width-100 { width: 100% !important; transition: width 0.3s cubic-bezier(0.075, 0.82, 0.165, 1); } .upk-pholox-slider .upk-main-slider .upk-category { margin-bottom: 10px; } .upk-pholox-slider .upk-main-slider .upk-play-btn a { width: clamp(3.75rem, 7vw, 4.375rem); height: clamp(3.75rem, 7vw, 4.375rem); line-height: clamp(3.75rem, 7vw, 4.375rem); font-size: clamp(0.75rem, 1.5vw, 0.875rem); } .upk-pholox-slider .upk-main-slider .upk-content { position: unset; max-width: clamp(24rem, 45vw, 31.25rem); overflow: hidden; background: #fff; padding-top: 20px; } .upk-pholox-slider .upk-main-slider .upk-title { font-size: clamp(1.125rem, 3vw, 1.875rem); margin-top: 0; margin-bottom: 10px; } .upk-pholox-slider .upk-main-slider .upk-meta { display: inline-flex; flex-wrap: wrap; align-items: center; } .upk-pholox-slider .upk-main-slider .upk-meta > div { position: relative; display: inline-flex; align-items: center; } .upk-pholox-slider .upk-main-slider .upk-meta > div:before { content: attr(data-separator); margin: 0 8px; } .upk-pholox-slider .upk-main-slider .upk-meta > div:nth-child(1)::before { display: none; } .upk-pholox-slider .upk-main-slider .upk-author a { padding-left: 5px; color: currentColor; } .upk-pholox-slider .upk-main-slider .upk-date span { padding-left: 5px; } .upk-pholox-slider .upk-main-slider .upk-separator { margin: 0 15px; } .upk-pholox-slider .upk-thumbs-slider .upk-item:after { content: ""; position: absolute; height: 3px; width: 0; background: #e62a3f; top: 0; left: 0; transition: width 0.7s ease-in-out; z-index: 1; } .upk-pholox-slider .upk-thumbs-slider .upk-item:hover:after, .upk-pholox-slider .upk-thumbs-slider .upk-item.swiper-slide-active:after { width: 100%; } .upk-pholox-slider .upk-thumbs-slider .upk-img-wrap { height: 100%; } .upk-pholox-slider .upk-thumbs-slider .upk-play-btn a { width: clamp(2.5rem, 5vw, 3rem); height: clamp(2.5rem, 5vw, 3rem); line-height: clamp(2.5rem, 5vw, 3rem); font-size: clamp(0.625rem, 1.5vw, 0.75rem); } .upk-pholox-slider .upk-thumbs-slider .upk-content { padding: 15px 15px 0 0; } .upk-pholox-slider .upk-thumbs-slider .upk-title { margin: 0; font-size: clamp(0.75rem, 2vw, 1rem); } .upk-pholox-slider .upk-thumbs-slider .upk-title a { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } .upk-pholox-slider .upk-video-wrap { position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-color: #000; z-index: -1; } .upk-pholox-slider .upk-video-wrap .upk-video-iframe { width: 100%; height: 100%; border: none !important; } @media (min-width: 768px) { .upk-pholox-slider .upk-main-slider { height: clamp(25rem, 40vw, 31.25rem); } .upk-pholox-slider .upk-main-slider .upk-item { display: flex; } .upk-pholox-slider .upk-main-slider .upk-content { position: absolute; top: 50%; transform: translateY(-50%); bottom: unset; } .upk-pholox-slider .upk-main-slider .upk-img-wrap { width: clamp(74%, 30vw, 80%); height: 100%; } .upk-pholox-slide-style-left .upk-main-slider .upk-item { flex-direction: row-reverse; } .upk-pholox-slide-style-left .upk-main-slider .upk-content { left: 0; padding: clamp(3.75rem, 5vw, 4.375rem) clamp(1.25rem, 3vw, 1.875rem) clamp(3.75rem, 5vw, 4.375rem) 0; } .upk-pholox-slide-style-right .upk-main-slider .upk-item { flex-direction: row; } .upk-pholox-slide-style-right .upk-main-slider .upk-content { right: 0; padding: clamp(3.75rem, 5vw, 4.375rem) 0 clamp(3.75rem, 5vw, 4.375rem) clamp(1.25rem, 3vw, 1.875rem); text-align: right; } }