­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ .upk-post-category { display: grid; } .upk-post-category .upk-category-item { position: relative; background: #2B2D42; display: flex; flex-direction: column; justify-content: center; padding: 20px; } .upk-post-category .upk-category-item .upk-category-image { width: 100%; height: 100%; } .upk-post-category .upk-category-item .upk-category-name { font-weight: 600; color: #fff; transition: all 0.3s ease; } .upk-post-category .upk-category-item .upk-category-text { color: #dcdee2; font-size: 15px; padding-top: 10px; transition: all 0.3s ease; } .upk-post-category .upk-category-item .upk-category-count { font-size: 13px; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(255, 255, 255, 0.3); border-radius: 2px; transition: all 0.3s ease; position: absolute; left: 0; top: 0; padding: 16px; } .upk-post-category .upk-category-item .upk-category-btn { background-color: rgba(255, 254, 254, 0.2392156863); text-align: center; backdrop-filter: blur(5px); text-transform: capitalize; font-weight: 700; color: #fff; font-size: 14px; transition: all 0.3s cubic-bezier(0.14, 0.57, 0.36, 1); padding: 14px; border-radius: 10px; } .upk-post-category .upk-category-item .upk-category-btn:hover { background-color: rgba(0, 0, 0, 0.0705882353); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1882352941) inset; } .upk-post-category .upk-category-item .upk-content { display: inline-flex; flex-direction: column; position: relative; } .upk-post-category.upk-category-view-all .upk-content { flex: 1; } .upk-post-category.upk-category-view-all .upk-content + .upk-category-btn { margin-top: 30px; } .upk-post-category.upk-category-style-1 .upk-category-item { border-radius: 4px; transition: all 0.3s ease; } .upk-post-category.upk-category-style-1 .upk-category-item:hover { opacity: 0.8; } .upk-post-category.upk-category-style-1 .upk-category-name { font-size: 16px; } .upk-post-category.upk-category-style-1 .upk-category-image { margin-bottom: 30px; } .upk-post-category.upk-category-style-2 .upk-category-item { border-radius: 15px; min-height: 100px; overflow: hidden; } .upk-post-category.upk-category-style-2 .upk-category-image { position: absolute; margin: 0; top: 0; right: 0; } .upk-post-category.upk-category-style-2 .upk-category-image::before { position: absolute; content: ""; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.45); } .upk-post-category.upk-category-style-2 .upk-category-image img { width: 100%; height: 100%; object-fit: cover; } .upk-post-category.upk-category-style-2 .upk-content { z-index: 1; } .upk-post-category.upk-category-style-2 .upk-category-name { font-size: 20px; } .upk-post-category.upk-category-style-2 .upk-category-count { border-radius: 8px; }