.wotMain { display: flex; flex-direction: row; grid-gap: 10px; } @media (max-width: 576px) { .wotMain { flex-direction: column; } } .wotMain.wotMainAlt { flex-direction: column; } .wotMainSec { display: flex; flex-direction: column; grid-gap: 5px; width: 100%; } .wotMainSecPeople { display: flex; flex-direction: row; grid-gap: 5px; } .wotMainSecPeoplePerson { transition: ease 0.3s; min-width: 40px; max-width: 40px; min-height: 40px; min-width: 40px; background: rgba(255,255,255,0.75); backdrop-filter: blur(5px); border-radius: 100%; border: solid 3px white; box-shadow: 0 0 4px 0 rgb(0,0,0,0.5); display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; overflow: hidden; margin-left: -20px; color: rgba(0,0,0,0.5); font-weight: 700; font-size: 14px; } .wotMainSecPeoplePerson:first-child { margin: 0; } .wotMainSecPeoplePerson:hover { margin: 0 20px 0 0; transform: translateY(-5px); border: solid 3px rgb(255,153,0); box-shadow: 0 0 0px 0 rgb(0,0,0,0.5); } .wotMainSecPeoplePersonImg { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; }