.gender-items {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 20px;
    margin-top: 10px;
}

@container main (min-width: 768px) {
    .gender-items {
        grid-template-columns: 1fr 1fr 1fr;

    }
}

.gender-item {
    margin-bottom: 20px;
}

.gender-item > input {
    display: none;
}

.gender-item label {
    white-space: normal;
    font-size: 18px;
    text-align: center;
    width: 100%;
    height: 100%;
    border: 1px solid rgb(194, 194, 194);
    padding: 10px;
}

.gender-item p {
    margin: 0;
}

.gender-item input:checked + label{
    background: rgb(194, 194, 194)
}