accordion.scss

.control-extend {
    &__label {
        display: none;
        @media only screen and (min-width: 768px) {
            display: inline-block;
            font-weight: 800;
            cursor: pointer;
            color: black;
            &:hover {
                text-decoration: underline;
            }
        }
    }

    @media only screen and (min-width: 768px) {
        &--extended {
            max-height: 0;
            transition: max-height 0.8s cubic-bezier(0, 0, 0.2, 1);
            overflow: hidden;
        }
    }

    &__checkbox {
        display: none;
        @media only screen and (min-width: 768px) {
            display: inline-block;
            visibility: hidden;
            &:checked {
                ~ .control-extend--extended {
                    max-height: 9000px;
                    transition: max-height 0.8s cubic-bezier(0.4, 0, 0.2, 1);
                    overflow: visible;
                }
            }
        }
    }
}