..cards{display:flex; flex-wrap:wrap; justify-content:space-between; row-gap:20px; column-gap:0; margin:0; padding:0; padding-left:20px;} .cards__card{display:flex; flex-direction:column; flex-wrap:wrap; flex:0 1 24%; max-width:24%; box-sizing:border-box; align-items:centre; text-decoration:none; color:inherit; transition:border 0.25s ease,transform 0.25s ease,color 0.25s ease;} a.cards__card.card{border:1px solid transparent; cursor:pointer;} a.cards__card.card{position:relative; border:1px solid transparent; box-sizing:border-box; cursor:pointer; transition:border-color 0.25s ease,transform 0.25s ease;} a.cards__card.card::after{content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:0 0 0 0 #000000; transition:box-shadow 0.25s ease,transform 0.25s ease; pointer-events:none;} a.cards__card.card:hover::after{box-shadow:0 0 0 2px #000000;} a.cards__card.card:hover{transform:translateY(-7px);} section.cards__card.card{border:1px solid transparent; cursor:default;} .cards__card .card__image{display:block; margin-left:auto; margin-right:auto; height:auto; max-width:100%; padding:0.7rem;} .card__text{padding:.7rem 1.4rem; width:100%;} .card__text h2{line-height:24px; font-weight:700; font-size:1.25rem; font-family:"Space Mono",monospace;} a.cards__card,a.cards__card:hover,a.cards__card:focus,a.cards__card:active{text-decoration:none;} a.cards__card,a.cards__card:hover,a.cards__card:focus,a.cards__card:active,a.cards__card:visited{color:inherit;} @media(max-width:1024px){.cards__card{flex:1 1 calc(50% - 40px); max-width:calc(50% - 40px);}} @media(max-width:640px){.cards{gap:20px;} .cards__card{flex:1 1 100%; max-width:100%; margin-bottom:1rem;}