.post-navigation-link-action { display: flex; align-items: center; gap: 15px; max-width: 500px; flex: 1; cursor: pointer; } .post-navigation-link-action:hover .post-navigation-link__post-thumbnail::after { opacity: 1; } .post-navigation-link-action--next { justify-content: flex-end; margin-left: auto; } .post-navigation-link-action--next .post-navigation-link__post-thumbnail { text-align: right; } .post-navigation-link-action .post-navigation-link__post-thumbnail { display: flex; position: relative; } .post-navigation-link-action .post-navigation-link__post-thumbnail::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); border-radius: 9px; opacity: 0.5; transition: all ease-in-out var(--theme-component-transition-duration, .2s); z-index: 10; } .post-navigation-link-action .post-navigation-link__post-thumbnail .post-navigation-link__arrow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all ease-in-out var(--theme-component-transition-duration, .2s); z-index: 11; font-size: 30px; font-weight: 300; color: #fff; } .post-navigation-link-action .post-navigation-link__post-thumbnail img { object-fit: cover; position: relative; border-radius: 9px; width: 95px; height: 75px; } .post-navigation-link-action .post-navigation-link__content { max-width: 240px; } .post-navigation-link-action .post-navigation-link__content > :last-child { font-weight: 600; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; /* number of lines to show */ line-clamp: 2; -webkit-box-orient: vertical; }