­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ .upk-accordion-wrapper { display: flex; gap: 20px; } .upk-accordion-wrapper .upk-accordion-item { flex: 1 1; transition: flex 400ms; cursor: pointer; overflow: hidden; border-radius: 10px; } .upk-accordion-wrapper .upk-accordion-item:hover { flex: 2; } .upk-accordion-wrapper .upk-accordion-item:hover .upk-accordion-item-box::before { background: rgba(19, 19, 28, 0.7); } .upk-accordion-wrapper .upk-accordion-item-box { position: relative; width: 100%; height: 100%; transition: all 0.3s ease; } .upk-accordion-wrapper .upk-accordion-item-box::before { position: absolute; content: ""; width: 100%; height: 100%; background: rgba(43, 45, 66, 0.5); transition: all 0.3s ease; } .upk-accordion-wrapper .upk-accordion-image { height: 100%; width: 100%; display: flex; } .upk-accordion-wrapper .upk-accordion-image .upk-img { width: 100%; height: 100%; object-fit: cover; } .upk-accordion-wrapper .upk-accordion-content { position: absolute; bottom: 0; left: 0; padding: 20px; width: 100%; } .upk-accordion-wrapper .upk-category { display: inline-block; margin-bottom: 10px; } .upk-accordion-wrapper .upk-category a, .upk-accordion-wrapper .upk-category a:before { display: block; color: #fff; background: #EF233C; padding: 6px 12px; font-size: 11px; font-weight: 500; line-height: 1; border-radius: 3px; text-transform: uppercase; transition: all 0.3s ease; } .upk-accordion-wrapper .upk-category a:hover, .upk-accordion-wrapper .upk-category a:hover::before { background: #D90429; } .upk-accordion-wrapper .upk-category a + a { margin-left: 5px; } .upk-accordion-wrapper .upk-title { margin: 0; margin-bottom: 15px; font-size: 18px; font-weight: 600; line-height: 1.4; } .upk-accordion-wrapper .upk-title a { color: #fff; transition: all 0.3s ease; } .upk-accordion-wrapper .upk-title a:hover { color: #EF233C; } .upk-accordion-wrapper .upk-text { font-size: 14px; color: #cad1d4; margin-bottom: 15px; } .upk-accordion-wrapper .upk-text p { margin: 0; } .upk-accordion-wrapper .upk-accordion-meta { display: flex; flex-wrap: wrap; align-items: center; color: #cad1d4; font-weight: 500; font-size: 14px; } .upk-accordion-wrapper .upk-accordion-meta .upk-post-time { margin-left: 5px; } .upk-accordion-wrapper .upk-accordion-meta .upk-post-time i { margin-right: 2px; } .upk-accordion-wrapper .upk-accordion-meta .upk-accordion-date i { margin-right: 4px; } .upk-accordion-wrapper .upk-accordion-meta > div { position: relative; display: inline-flex; align-items: center; } .upk-accordion-wrapper .upk-accordion-meta > div:before { content: attr(data-separator); margin: 0 8px; } .upk-accordion-wrapper .upk-accordion-meta > div:nth-child(1)::before { display: none; } .upk-accordion-wrapper .upk-accordion-meta .upk-accordion-comments, .upk-accordion-wrapper .upk-accordion-meta .upk-accordion-date { display: flex; align-items: center; gap: 7px; } .upk-accordion-wrapper .upk-author-wrapper { position: absolute; top: 20px; left: 20px; display: flex; align-items: center; } .upk-accordion-wrapper .upk-author-img img { border-radius: 80px; margin-right: 10px; } .upk-accordion-wrapper .upk-author-info-warp { flex-direction: column; } .upk-accordion-wrapper .upk-author-name a { font-size: 14px; color: #cad1d4; font-weight: 600; letter-spacing: 0.5px; transition: color 0.3s ease; } .upk-accordion-wrapper .upk-author-role { font-size: 14px; color: #cad1d4; line-height: 1; } .upk-accordion-wrapper.upk-accordion-style-1 { height: 750px; flex-direction: column; } .upk-accordion-wrapper.upk-accordion-style-2 { height: 750px; flex-direction: column; } .upk-accordion-wrapper.upk-accordion-contentstyle-2 .upk-text { display: none; } .upk-accordion-wrapper.upk-accordion-contentstyle-2 .upk-accordion-date, .upk-accordion-wrapper.upk-accordion-contentstyle-2 .upk-category, .upk-accordion-wrapper.upk-accordion-contentstyle-2 .upk-title, .upk-accordion-wrapper.upk-accordion-contentstyle-2 .upk-accordion-comments { overflow: hidden; } .upk-accordion-wrapper.upk-accordion-contentstyle-2 .upk-category a, .upk-accordion-wrapper.upk-accordion-contentstyle-2 .upk-title a, .upk-accordion-wrapper.upk-accordion-contentstyle-2 .upk-accordion-date span, .upk-accordion-wrapper.upk-accordion-contentstyle-2 .upk-accordion-comments span { position: relative; display: block; -webkit-transition: -webkit-transform 0.2s; transition: transform 0.2s; transform-origin: 100% 0%; } .upk-accordion-wrapper.upk-accordion-contentstyle-2 .upk-category a::before, .upk-accordion-wrapper.upk-accordion-contentstyle-2 .upk-title a::before, .upk-accordion-wrapper.upk-accordion-contentstyle-2 .upk-accordion-date span::before, .upk-accordion-wrapper.upk-accordion-contentstyle-2 .upk-accordion-comments span::before { position: absolute; top: 100%; width: 100%; left: 0; content: attr(data-hover); } .upk-accordion-wrapper.upk-accordion-contentstyle-2 .upk-accordion-item:hover .upk-category a, .upk-accordion-wrapper.upk-accordion-contentstyle-2 .upk-accordion-item:hover .upk-title a, .upk-accordion-wrapper.upk-accordion-contentstyle-2 .upk-accordion-item:hover .upk-accordion-date span, .upk-accordion-wrapper.upk-accordion-contentstyle-2 .upk-accordion-item:hover .upk-accordion-comments span { -webkit-transform: translateY(-100%); transform: translateY(-100%); transform-origin: 0% 0%; } .upk-global-link-yes .upk-accordion-wrapper .upk-alex-carousel-item:hover { cursor: pointer; } @media (min-width: 768px) { .upk-accordion-wrapper.upk-accordion-style-1 { height: 350px; flex-direction: row; } .upk-accordion-wrapper.upk-accordion-style-2 { height: 1000px; } .upk-accordion-wrapper .upk-accordion-content { padding: 30px; } .upk-accordion-wrapper .upk-author-wrapper { top: 30px; left: 30px; } } @media (min-width: 1024px) { .upk-accordion-wrapper .upk-accordion-content { width: 370px; } .upk-accordion-wrapper .upk-category a, .upk-accordion-wrapper .upk-category a::before { padding: 8px 12px; font-size: 10px; } .upk-accordion-wrapper .upk-title { font-size: 22px; margin-bottom: 10px; } .upk-accordion-wrapper .upk-text { font-size: 16px; margin-bottom: 20px; } .upk-accordion-wrapper .upk-accordion-meta { font-size: 15px; } .upk-accordion-wrapper .upk-author-name a { font-size: 15px; } }