section.bigCardWrapper.double { display: flex; flex-direction: row; max-width: 80vw; margin: auto; } section.bigCardWrapper.double > .bigCard { flex: 1; padding: 1em 6em; margin: 0; } section.bigCardWrapper.double > .bigCard:first-child { margin-right: 3em; } .listItem { position: relative; } .listItem h2 { font-size: 1rem; color: #353535; margin: 1em 0 0 0; } .listItem p { margin: .2em 0 0 0; } .listItem.state1::before, .listItem.state2::before, .listItem.state3::before { content: ""; position: absolute; top: .2em; left: -1.5em; width: 1em; height: 1em; border-radius: 50%; background-color: #f57c7c; /* state 1: no support */ } .listItem.state2::before { background-color: #e6ae65; /* state 2: partial support/bugged */ } .listItem.state3::before { background-color: #58ef81; /* state 3: full support/working */ } @media screen and (max-width: 1000px) { section.bigCardWrapper.double { display: flex; flex-direction: column; } section.bigCardWrapper.double > .bigCard { flex: 0; } section.bigCardWrapper.double > .bigCard:first-child { margin-right: 0; margin-bottom: 3em; } } @media screen and (max-width: 500px) { section.bigCardWrapper.double { max-width: 100vw; margin: 0; } section.bigCardWrapper.double > .bigCard { padding: 50px; } }