@media screen and (min-width: 981px) { #Content1 { padding: 60px 180px !important; } DATE { color: #555; font-size: 14px; } DATE:before { content: "■ "; color: #C41230; font-size: 16px; padding-bottom: 5px;} .Articles { display: grid; width: 100%; margin-top: 50px; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); grid-gap: 65px; list-style: none; } .Articles LI { height: 300px; background: #FFF; } .Articles LI A { height: 300px; display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; } .Articles LI A FIGURE { flex-basis: 180px; background: url(/i/loctite1.144319309.png) center; background-size: cover; background-position1: top center; } .Articles LI A DATE { padding: 20px 20px 0 20px; color: #555; font-size: 12px; } .Articles LI A DATE:before { display: none; } .Articles LI A DIV { flex-grow: 9; } .Articles LI A H2 { padding: 3px 20px 20px 20px; font-size: 19px; line-height: 21px; font-weight: 500; border: none; } } @media screen and (max-width: 980px) { DATE { color: #555; font-size: 28px; } #Content { padding: 60px 40px 0px 40px; } .Articles { list-style: none; } .Articles LI { width: 100%; height: 600px; margin: 40px 0; background: #FFF; } .Articles LI A { height: 600px; display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; } .Articles LI A FIGURE { flex-basis: 360px; background: url(/i/loctite1.144319309.png) center; background-size: cover; background-position1: top center; } .Articles LI A DATE { padding: 40px 40px 0 40px; color: #555; font-size: 24px; } .Articles LI A DIV { flex-grow: 9; } .Articles LI A H2 { padding: 4px 40px 40px 40px; font-size: 38px; line-height: 42px; font-weight: 500; border: none; } }