* { scroll-margin-top: 10.5em; } .course-container { display: flex; justify-content: space-around; flex-wrap: wrap; align-items: baseline; } .course { display: flex; flex-direction: column; align-items: center; width: 50%; padding: 2.5%; box-sizing: border-box; text-decoration: none; justify-content: end; } .course .image { margin-bottom: 1em; width: 100%; overflow: hidden; position: relative; } .course .image::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid rgba(0,0,0,.25); } .course .image img { width: 100%; margin: -10% 0; } .course .caption { color: inherit; text-align: center; text-decoration: underline; } .course .info { color: dimgrey; } .separator { color: red; font-weight: bold; font-size: 1.2em; text-align: center; border: solid; border-width: 0 5em 2px; border-color: transparent transparent red; padding: .5em 0; position: sticky; top: -1px; z-index: 99; background: white; } @media (max-width: 768px) { .course, [id^=mgm] img {width: 100% !important; } [id^=mgm] {padding: 2.5%; display: inline-block;} }