.toggleable {
        display: none; /* 初期状態は非表示 */
    }

    @media only screen and (min-width: 768px) {
        .container {
            display: flex;
            flex-wrap: wrap;
        }

        .toggleable {
            display: block;
            width: calc(25% - 20px); /* 4カラム表示 */
            margin: 10px;
        }
    }

    @media only screen and (max-width: 767px) {
        .container {
            display: flex;
            flex-wrap: wrap;
        }

        .toggleable {
            display: block;
            width: calc(50% - 20px); /* 2カラム表示 */
            margin: 10px;
        }
    }