­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ .upk-scott-list { display: grid; grid-template-columns: repeat(1, 1fr); counter-reset: number-count; } .upk-scott-list .upk-item { display: flex; align-items: center; border-top: 1px solid #e2e2e2; padding-top: 20px; margin-top: 20px; position: relative; overflow: hidden; } .upk-scott-list .upk-item:first-child { border-top: 0 !important; padding-top: 0 !important; margin-top: 0 !important; } .upk-scott-list .upk-item .upk-image-wrap { position: relative; height: 100%; width: 30%; text-decoration: none; transition: all 0.3s ease; counter-increment: number-count; overflow: hidden; } .upk-scott-list .upk-item .upk-image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: all 0.3s ease; } .upk-scott-list .upk-item .upk-image-wrap:before { position: absolute; content: counter(number-count); top: 50%; left: 50%; color: #fff; font-weight: 700; font-size: 35px; transition: all 0.3s ease; transform: translate(-50%, -50%); opacity: 1; visibility: visible; z-index: 1; } .upk-scott-list .upk-item .upk-image-wrap:after { position: absolute; content: "\e92c"; top: 50%; left: 50%; color: #fff; font-size: 26px; font-weight: 900; line-height: 1; opacity: 0; visibility: hidden; transition: all 0.3s ease; transform: translate(-50%, 50%); font-family: "ultimate-post-kit" !important; -webkit-font-smoothing: antialiased; z-index: 1; } .upk-scott-list .upk-item .upk-image-wrap .upk-img-overlay:before { content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: rgba(43, 45, 66, 0.3); } .upk-scott-list .upk-item .upk-content { width: 70%; padding: 20px; } .upk-scott-list .upk-item .upk-category { margin-bottom: 10px; display: flex; } .upk-scott-list .upk-item .upk-category a { font-size: 10px; color: #EF233C; text-transform: uppercase; font-weight: 500; border: 1px solid #EF233C; padding: 4px 12px; border-radius: 2px; display: inline-flex; transition: all 0.3s ease; } .upk-scott-list .upk-item .upk-category a:hover { background: #EF233C; color: #fff; } .upk-scott-list .upk-item .upk-category a + a { margin-left: 5px; } .upk-scott-list .upk-item .upk-title { font-size: 16px; font-weight: 700; line-height: 1.4; margin: 0; } .upk-scott-list .upk-item .upk-title a { color: #2B2D42; transition: all 0.3s ease; } .upk-scott-list .upk-item .upk-title a:hover { color: #EF233C; } .upk-scott-list .upk-item .upk-meta { color: #8D99AE; font-size: 11px; font-weight: 500; line-height: 1; padding-top: 10px; position: relative; text-transform: uppercase; transition: color 0.3s cubic-bezier(0.34, 0.01, 0.58, 1); flex-wrap: wrap; } .upk-scott-list .upk-item .upk-meta > div { position: relative; display: inline-flex; } .upk-scott-list .upk-item .upk-meta > div:before { content: attr(data-separator); margin: 0 8px; } .upk-scott-list .upk-item .upk-meta > div:nth-child(1)::before { display: none; } .upk-scott-list .upk-item .upk-meta .upk-author-name-wrap { display: flex; } .upk-scott-list .upk-item .upk-meta .upk-author-name-wrap .upk-by { font-weight: 700; padding-right: 6px; } .upk-scott-list .upk-item .upk-meta .upk-author-name-wrap .upk-author-name { color: #8D99AE; font-weight: 500; transition: color 0.3s cubic-bezier(0.34, 0.01, 0.58, 1); } .upk-scott-list .upk-item .upk-meta .upk-post-time { margin-left: 5px; } .upk-scott-list .upk-item .upk-meta .upk-post-time i { margin-right: 2px; } .upk-scott-list .upk-item:hover .upk-image-wrap:before { transform: translate(-50%, -100%); opacity: 0; visibility: hidden; } .upk-scott-list .upk-item:hover .upk-image-wrap:after { transform: translate(-50%, -50%); opacity: 1; visibility: visible; } .upk-global-link-yes .upk-scott-list .upk-item:hover { cursor: pointer; } @media (min-width: 768px) { .upk-scott-list .upk-item .upk-title { font-size: 18px; } .upk-scott-list .upk-item .upk-meta { font-size: 12px; } }