form .poll { grid-row: 1/3; grid-column: 2; padding: 0 0 0 2rem; input, label { display: inline-block; } .check{ display: block; position: absolute; border: .15rem solid #AAAAAA; border-radius: 100%; height: 1rem; width: 1rem; top: .5rem; left: .5rem; } .group { display: block; position: relative; margin: .5rem 0; .check::before { display: block; position: absolute; content: ''; border-radius: 100%; height: .4rem; width: .4rem; top: .18rem; left: .2rem; } @-moz-document url-prefix() { .check::before { height: .35rem; width: .35rem; top: .2rem; left: .2rem; } } label { font-size: .9rem; padding: .25rem 0 0 2rem; margin: 0; text-transform: none; vertical-align: middle; } } input[type=radio] { position: absolute; visibility: hidden; &:checked ~ .check { border: .15rem solid var(--s-color); } &:checked ~ .check::before{ background: var(--s-color); } &:checked ~ label{ color: var(--s-color); } } } @media only screen and (max-width: 600px) { form .poll { padding: 1rem 0; .check{ height: 1.25rem; width: 1.25rem; top: .5rem; left: .5rem; } .group { .check::before { height: .55rem; width: .55rem; top: .22rem; left: .22rem; } label { font-size: 1rem; padding: .25rem 0 0 2.5rem; } } } }