.widget { background-color: var(--white-color); padding: 20px; } .widget + .widget { margin-top: 30px; } .widget-no-title { padding: 5px; } .widget-title { border-bottom: 1px solid var(--light-gray-color); color: var(--secondary-text-color); font-family: var(--font-base); font-size: 11px; letter-spacing: 0.5px; margin: -20px -20px 20px; padding: 15px 20px; text-transform: uppercase; } .widget-tags .tag + .tag { margin-top: 5px; } .widget-tags .tag-link { align-items: center; display: flex; justify-content: space-between; } .widget-tags .tag-name { font-family: var(--font-alt); font-size: 16px; font-weight: 600; } .widget-tags .tag-count { align-items: center; background-color: var(--primary-color); border-radius: 50%; color: var(--white-color); display: flex; font-size: 12px; font-weight: 700; height: 24px; justify-content: center; min-width: 24px; } .widget-recent .recent { align-items: center; display: flex; } .widget-recent .recent + .recent { margin-top: 20px; } .widget-recent .post-header { margin-bottom: 0; overflow: hidden; } .widget-recent .post-title { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .widget-recent .post-date { margin-top: 3px; } .widget-instagram { padding: 4px; } .widget-instagram .instagram-feed { display: flex; flex-wrap: wrap; } .widget-instagram .instagram-feed-item { flex-shrink: 0; margin: 1px; position: relative; width: calc(33.3333333333% - 2px); } .widget-instagram .instagram-feed-item:before { background-color: rgba(0, 0, 0, 0.5); content: ""; display: block; opacity: 0; padding-bottom: 100%; position: relative; transition: opacity 0.2s var(--animation-base); z-index: 10; } .widget-instagram .instagram-feed-item:hover:before, .widget-instagram .instagram-feed-item:hover .instagram-feed-item-icon { opacity: 1; } .widget-instagram .instagram-feed-item-icon { align-items: center; color: var(--white-color); display: flex; font-size: 20px; height: 40px; justify-content: center; left: 50%; margin-left: -20px; margin-top: -20px; opacity: 0; position: absolute; top: 50%; transition: opacity 0.2s var(--animation-base); width: 40px; z-index: 20; } @media (max-width: 767px) { .widget-title { margin-bottom: 0; margin-top: 0; } }