#critters { .bios { list-style: none; .bio { display: flex; width: 100%; justify-content: center; align-items: center; flex-wrap: wrap; &:nth-child(even) { flex-direction: row-reverse; img { box-shadow: 30px 0px 0px #f2dfce; } .info { text-align: right; } } &:nth-child(odd) { img { box-shadow: -30px 0px 0px #f2dfce; } } .info { width: 50%; padding: 10px 30px; h1 { font-family: 'Handlee', cursive; text-transform: uppercase; font-weight: 800; font-size: 2em; } h2 { font-size: .75em; font-family: sans-serif; color: $dundo-green; } p { padding: 12px 0; } @media (max-width: 600px) { width: 100%; h1,h2,p { text-align: center;; } } } img { border: 5px solid $off-white; height: 200px; width: 200px; object-fit: cover; border-radius: 50%; } @media (max-width: 600px) { padding: 1em 0; } } } }