@media screen { body main p { margin-left: 1rem; } body main ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); grid-column-gap: 3rem; grid-row-gap: 2rem; margin: 3rem; margin-top: 1rem; padding: 0; list-style: none; } body main ul li { display: flex; flex-direction: column; justify-content: space-between; margin: 0; padding: 0; border: 3px solid white; } body main ul li:has(a:hover) { border: 3px solid #d1b6f7 ; } body main ul li h2 { margin: 0; margin-bottom: 1rem; padding-top: 1rem; padding-bottom: 1rem; padding-left: 0.3rem; padding-right: 0.3rem; text-align: center; } body main ul li img { height: 12rem; /*clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 1rem));*/ /*clip-path: circle(50%);*/ opacity: 1; /*filter: grayscale(100%);*/ margin: 0; padding-top: 0; padding-bottom: 1rem; } body main ul li p { margin: 0; padding-top: 0; padding-bottom: 1rem; padding-left: 0.3rem; padding-right: 0.3rem; text-align: center; } body main ul li a{ margin: 0; padding-top: 0.75rem; padding-bottom: 0.75rem; text-align: center; justify-self: center; text-decoration: none; background-color: white; color: black; font-weight: bold; } body main ul li a:hover { background-color: #000000; color: #d1b6f7 ; } } @media screen and (min-width: 300px) and (orientation: portrait) { } @media screen and (min-width: 600px) and (orientation: landscape) { } @media screen and (min-width: 1200px) { }