.blog-entry{ background: var(--rp-moon-surface); border-radius: 0.5rem; width:100%; color: var(--rp-moon-text) !important; text-decoration : none !important; display: flex; flex-flow: row wrap; box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.85)); } .blog-entry:hover{ box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.75)); background: var(--rp-moon-overlay); transition: 0.2s; } .blog-entry div { width: calc(100% - 17rem); padding: 1rem; } .blog-entry img{ width:15rem; object-fit: cover; border-radius: 0 0.5rem 0.5rem 0; } @media only screen and (max-width: 700px) { .blog-entry div { width: calc( 100% - 2rem); } .blog-entry img { width: 100%; max-height: 15rem; border-radius: 0 0rem 0.5rem 0.5rem; } } .blog-entry h4{ margin-top:0.5rem; margin-bottom: 0.5rem; }