­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ .upk-fanel-list { display: grid; grid-template-columns: repeat(1, 1fr); } .upk-fanel-list .upk-item { position: relative; overflow: hidden; transition: all 0.3s ease; } .upk-fanel-list .upk-item:hover { box-shadow: 0 0 10px rgba(43, 45, 66, 0.3); } .upk-fanel-list .upk-item:hover .upk-image-wrap .upk-img { transform: scale(1.1); } .upk-fanel-list .upk-item .upk-item-box { position: relative; display: flex; align-items: center; height: 100%; } .upk-fanel-list .upk-item .upk-image-wrap { position: relative; width: 40%; height: 100%; overflow: hidden; } .upk-fanel-list .upk-item .upk-image-wrap .upk-img { width: 100%; height: 100%; object-fit: cover; transition: all 1s ease; } .upk-fanel-list .upk-item .upk-fanel-date-wrap { position: absolute; bottom: 0; right: 0; padding: 10px 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; } .upk-fanel-list .upk-item .upk-fanel-date-wrap .upk-fanel-date { text-transform: capitalize; font-weight: 900; font-size: 18px; display: inline-flex; line-height: 1; color: #2B2D42; letter-spacing: 1px; } .upk-fanel-list .upk-item .upk-fanel-date-wrap .upk-fanel-month { color: #8D99AE; font-size: 14px; text-transform: capitalize; font-weight: 600; } .upk-fanel-list .upk-item .upk-content { position: relative; width: 60%; padding: 10px; } .upk-fanel-list .upk-item .upk-content.upk-readmore--yes { margin-bottom: 30px; } .upk-fanel-list .upk-item .upk-category { margin-bottom: 10px; display: inline-flex; } .upk-fanel-list .upk-item .upk-category a { display: inline-block; font-size: 10px; font-weight: 600; color: #8D99AE; text-transform: uppercase; transition: all 0.3s ease; } .upk-fanel-list .upk-item .upk-category a:hover { color: #EF233C; } .upk-fanel-list .upk-item .upk-category a + a { margin-left: 5px; } .upk-fanel-list .upk-item .upk-title { font-size: 16px; line-height: 1.3; font-weight: 700; text-transform: capitalize; margin: 0px; } .upk-fanel-list .upk-item .upk-title a { text-decoration: none; transition: all 0.3s ease; color: #2B2D42; } .upk-fanel-list .upk-item .upk-title a:hover { color: #EF233C; } .upk-fanel-list .upk-item .upk-text { display: none; font-size: 14px; font-weight: 400; color: #8D99AE; padding-top: 15px; } .upk-fanel-list .upk-item .upk-text p { margin: 0; } .upk-fanel-list .upk-item .upk-fanel-read-more { position: absolute; bottom: 0; right: 0; width: 40px; height: 30px; line-height: 30px; text-align: center; background: #EF233C; transition: all 0.3s ease; color: #fff; font-size: 20px; } .upk-fanel-list .upk-item .upk-fanel-read-more i { transition: transform 0.3s ease; transform: translateX(0); display: inline-flex; } .upk-fanel-list .upk-item .upk-fanel-read-more:hover { background: #D90429; } .upk-fanel-list .upk-item .upk-fanel-read-more:hover i { transform: translateX(5px); } .upk-fanel-list .upk-item .upk-fanel-meta { display: flex; flex-wrap: wrap; align-items: center; position: relative; color: #8D99AE; font-size: 11px; line-height: 1; padding-top: 10px; font-weight: 500; text-transform: uppercase; } .upk-fanel-list .upk-item .upk-fanel-meta .upk-author-name-wrap { display: flex; } .upk-fanel-list .upk-item .upk-fanel-meta .upk-author-name-wrap .upk-by { font-weight: 700; padding-right: 6px; } .upk-fanel-list .upk-item .upk-fanel-meta .upk-author-name-wrap .upk-author-name { text-decoration: none; color: #8D99AE; font-weight: 500; } .upk-fanel-list .upk-item .upk-fanel-meta > div { position: relative; display: inline-flex; } .upk-fanel-list .upk-item .upk-fanel-meta > div:before { content: attr(data-separator); margin: 0 5px; } .upk-fanel-list .upk-item .upk-fanel-meta > div:nth-child(1)::before { display: none; } .upk-global-link-yes .upk-fanel-list .upk-item:hover { cursor: pointer; } @media (min-width: 768px) { .upk-fanel-list .upk-item .upk-content { padding: 20px; } .upk-fanel-list .upk-item .upk-content.upk-readmore--yes { margin-bottom: 40px; } .upk-fanel-list .upk-item .upk-category a { font-size: 12px; } .upk-fanel-list .upk-item .upk-text { display: inherit; } .upk-fanel-list .upk-item .upk-title { font-size: 20px; line-height: 1.4; } .upk-fanel-list .upk-item .upk-fanel-read-more { width: 60px; height: 40px; line-height: 40px; } .upk-fanel-list .upk-item .upk-fanel-meta { font-size: 12px; padding-top: 15px; } } @media (min-width: 1024px) { .upk-fanel-list { grid-template-columns: repeat(2, 1fr); } .upk-fanel-list .upk-item .upk-content { padding: 30px; } .upk-fanel-list .upk-item .upk-fanel-date-wrap .upk-fanel-date { font-size: 20px; } }