.newsItem { position: relative; list-style: none; } .image { width: 100%; padding-top: 60%; background: var(--color-placeholder); position: relative; img { position: absolute; top: 0; width: 100%; height: 100%; object-fit: cover; } } .text { padding: .8rem 0 2rem; } .date { font-family: var(--font-serif); font-size: var(--font-size-caption); color: var(--color-chateauBlue-05); } .title { margin: .4rem 0 .6rem; } .lead { font-size: var(--font-size-caption); } @media (max-width: 600px) { .newsItem { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; --item-height: 19rem; } .image { width: var(--item-height); height: var(--item-height); } .text { padding-top: 0; max-height: var(--item-height); overflow: hidden; position: relative; &:after { content: ""; background-image: linear-gradient(to top, var(--color-background), transparent); position: absolute; left: 0; right: 0; bottom: 0; height: 4rem; pointer-events: none; } } } @media (max-width: 600px) { .newsItem { --item-height: 8rem; } }