.upk-kalon-carousel .upk-item {
display: flex;
height: 300px;
overflow: hidden;
transition: all 0.3s ease;
}
.upk-kalon-carousel .upk-item:hover .upk-img-wrap a .upk-img {
transform: scale(1.1);
}
.upk-kalon-carousel .upk-item:hover .upk-content {
opacity: 0;
visibility: hidden;
transform: translateY(0);
}
.upk-kalon-carousel .upk-item:hover .upk-btn-wrap {
opacity: 1;
transform: translateY(0);
transition-delay: 0.1s;
}
.upk-kalon-carousel .upk-item-box {
position: relative;
overflow: hidden;
width: 100%;
}
.upk-kalon-carousel .upk-item-box::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(0deg, #2B2D42 0, rgba(141, 153, 174, 0.1) 100%);
transition: all 0.3s ease;
}
.upk-kalon-carousel .upk-img-wrap {
width: 100%;
height: 100%;
display: flex;
}
.upk-kalon-carousel .upk-img-wrap .upk-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.3s ease;
}
.upk-kalon-carousel .upk-content-box {
position: absolute;
padding: 30px;
width: 100%;
left: 0;
bottom: 0;
z-index: 1;
}
.upk-kalon-carousel .upk-content {
transform: translateY(25px);
transition: all 0.8s cubic-bezier(0.17, 0.73, 0.66, 0.99) 0s, z-index 0s step-end, opacity 0.4s ease;
opacity: 1;
visibility: visible;
}
.upk-kalon-carousel .upk-content .upk-title {
font-size: 16px;
font-weight: 600;
margin: 0;
margin-bottom: 6px;
text-transform: capitalize;
}
.upk-kalon-carousel .upk-content .upk-title a {
color: #fff;
}
.upk-kalon-carousel .upk-content .upk-meta .upk-flex-inline {
align-items: center;
margin-bottom: 3px;
flex-wrap: wrap;
}
.upk-kalon-carousel .upk-content .upk-meta .upk-flex-inline > div {
position: relative;
display: inline-flex;
align-items: center;
}
.upk-kalon-carousel .upk-content .upk-meta .upk-flex-inline > div:before {
content: attr(data-separator);
margin: 0 8px;
}
.upk-kalon-carousel .upk-content .upk-meta .upk-flex-inline > div:nth-child(1)::before {
display: none;
}
.upk-kalon-carousel .upk-content .upk-meta .upk-reading-time,
.upk-kalon-carousel .upk-content .upk-meta .upk-date,
.upk-kalon-carousel .upk-content .upk-meta .upk-post-time {
color: #c5d0e2;
font-size: 12px;
text-transform: uppercase;
font-weight: 500;
}
.upk-kalon-carousel .upk-content .upk-meta .upk-post-time {
margin-left: 5px;
}
.upk-kalon-carousel .upk-content .upk-meta .upk-post-time i {
margin-right: 2px;
}
.upk-kalon-carousel .upk-content .upk-meta .upk-kalon-author {
display: block;
}
.upk-kalon-carousel .upk-content .upk-meta .upk-kalon-author .upk-author-text {
font-size: 12px;
color: #c5d0e2;
text-transform: uppercase;
}
.upk-kalon-carousel .upk-content .upk-meta .upk-kalon-author .upk-author-name {
padding-left: 8px;
font-size: 12px;
color: #c5d0e2;
text-transform: uppercase;
font-weight: 500;
}
.upk-kalon-carousel .upk-btn-wrap {
opacity: 0;
width: 100%;
transform: translateY(30px);
transition: transform 0.4s cubic-bezier(0.17, 0.73, 0.66, 0.99) 0s, z-index 0.4s step-end, opacity 0.4s ease;
}
.upk-kalon-carousel .upk-btn-wrap .upk-btn {
text-decoration: none;
color: #EDF2F4;
font-size: 12px;
text-transform: uppercase;
font-weight: 600;
display: inline-block;
transition: all 0.3s ease;
}
.upk-kalon-carousel .upk-btn-wrap .upk-btn .upk-btn-icon i,
.upk-kalon-carousel .upk-btn-wrap .upk-btn .upk-btn-icon svg {
width: 1em;
}
.upk-kalon-carousel .upk-btn-wrap .upk-btn:hover {
color: #EF233C;
}
.upk-kalon-carousel .upk-category {
margin-bottom: 10px;
}
.upk-kalon-carousel .upk-category a {
color: #fff;
background: #EF233C;
display: inline-flex;
padding: 4px 8px;
font-size: 10px;
line-height: 1;
font-weight: 600;
text-transform: uppercase;
border-radius: 2px;
letter-spacing: 0.5px;
}
.upk-kalon-carousel .upk-category a + a {
margin-left: 5px;
}
.upk-global-link-yes .upk-kalon-carousel .upk-item:hover {
cursor: pointer;
}
@media (min-width: 768px) {
.upk-kalon-carousel .upk-title {
font-size: 16px;
}
.upk-kalon-carousel .upk-meta .upk-post-time,
.upk-kalon-carousel .upk-meta .upk-date {
font-size: 13px;
}
.upk-kalon-carousel .upk-btn-wrap .upk-btn {
font-size: 13px;
}
.upk-kalon-carousel .upk-category a {
padding: 6px 12px;
font-size: 11px;
}
}
@media (min-width: 1024px) {
.upk-kalon-carousel .upk-title {
font-size: 20px;
}
.upk-kalon-carousel .upk-meta .upk-post-time,
.upk-kalon-carousel .upk-meta .upk-date {
font-size: 14px;
}
.upk-kalon-carousel .upk-meta .upk-kalon-author .upk-author-text,
.upk-kalon-carousel .upk-meta .upk-kalon-author .upk-author-name {
font-size: 14px;
}
.upk-kalon-carousel .upk-btn-wrap .upk-btn {
font-size: 14px;
}
}