.mode-switch {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1rem;
}

    .mode-switch label {
        transition: all 0.3s ease;
        border: 1px solid rgba(0, 0, 0, 0.125); /* colour matches the Bootstrap card border, there isn't a variable for it */
        border-radius: 1rem;
        padding: 1rem;
        cursor: pointer;
        background-color: var(--tertiary-light);
        justify-items: center;
    }

    .mode-switch input[type="radio"]:checked + label {
        cursor: unset;
        background-color: white;
        box-shadow: inset 0 0 0.5rem 0 var(--tertiary-dark);
    }

    .mode-switch input[type="radio"]:not(:checked) + label:hover {
        box-shadow: inset 0 0 0.25rem 0 var(--tertiary-dark);
    }

    .mode-switch h2 {
        color: var(--primary);
    }