@media only screen and (max-device-width: 900px) {

.radio-group {
    gap: 40px;
}

.radio-button {
    width: 30px;
    height: 30px;
    border: 4px solid;
}

.radio1, .radio1::after {
    width: 100px;
    height: 100px;
    border-color: rgb(136, 97, 154);
}

.radio1::after {
}

.radio2, .radio2::after {
    width: 80px;
    height: 80px;
    border-color: rgb(136, 97, 154);
}

.radio2::after {
}

.radio3, .radio3::after {
    width: 60px;
    height: 60px;
    border-color: #6f8887;
}

.radio3::after {
}

.radio4, .radio4::after {
    width: 80px;
    height: 80px;
    border-color: rgb(51, 164, 116);
}

.radio4::after {
}

.radio5, .radio5::after {
    width: 100px;
    height: 100px;
    border-color: rgb(51, 164, 116);
}

.radio5::after {
}

/* inner fill element */
.radio-button::after {
}

/* hover preview fill */
.radio-button:not(.radio-selected):hover::after {
}

.radio-button:not(.radio-selected):hover {
}

/* selected state */
.radio-button.radio-selected::after {
}

}