{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideColumnHeader": true,
  "hideSelection": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "width": "= @window.innerWidth * 0.07 + 'px'",
      "height": "= @window.innerHeight * 0.6 + 'px'",
      "border-top": "3px solid",
      "border-bottom": "3px solid",
      "border-right": "3px solid",
      "border-left": "=if(@rowIndex == 0 , '3px solid' '')",
      "position": "absolute",
      "top": "0",
      "left": "= @rowIndex * @window.innerWidth * 0.07 + 'px'",
      "cursor": "pointer"
    },
    "attributes": {
      "class": "ms-fontColor-themePrimary ms-bgColor-themeLighter--hover"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "width": "100%",
          "height": "100%",
          "position": "relative"
        },
        "customCardProps": {
          "openOnEvent": "click",
          "directionalHint": "topCenter",
          "isBeakVisible": false,
          "formatter": {
            "elmType": "div",
            "style": {
              "padding": "30px"
            },
            "attributes": {
              "class": "ms-bgColor-themePrimary"
            },
            "children": [
              {
                "elmType": "div",
                "txtContent": "[$Title]",
                "style": {
                  "font-size": "30px",
                  "font-weight": "bold"
                },
                "attributes": {
                  "class": "ms-fontColor-white"
                }
              }
            ]
          }
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "position": "absolute",
              "top": "0",
              "left": "0",
              "width": "30%",
              "height": "60%",
              "display": "=if(@rowIndex % 7 == 0 , 'none' , if(@rowIndex % 7 == 3 , 'none' , ''))"
            },
            "attributes": {
              "class": "ms-bgColor-themePrimary ms-bgColor-themeDark--hover"
            },
            "customCardProps": {
              "openOnEvent": "click",
              "directionalHint": "topCenter",
              "isBeakVisible": false,
              "formatter": {
                "elmType": "div",
                "style": {
                  "padding": "30px"
                },
                "attributes": {
                  "class": "ms-bgColor-themePrimary"
                },
                "children": [
                  {
                    "elmType": "div",
                    "txtContent": "= [$Title] + '♭'",
                    "style": {
                      "font-size": "30px",
                      "font-weight": "bold"
                    },
                    "attributes": {
                      "class": "ms-fontColor-white"
                    }
                  }
                ]
              }
            }
          },
          {
            "elmType": "div",
            "style": {
              "position": "absolute",
              "top": "0",
              "right": "0",
              "width": "30%",
              "height": "60%",
              "display": "=if(@rowIndex % 7 == 2 , 'none' , if(@rowIndex % 7 == 6 , 'none' , ''))"
            },
            "attributes": {
              "class": "ms-bgColor-themePrimary ms-bgColor-themeDark--hover"
            },
            "customCardProps": {
              "openOnEvent": "click",
              "directionalHint": "topCenter",
              "isBeakVisible": false,
              "formatter": {
                "elmType": "div",
                "style": {
                  "padding": "30px"
                },
                "attributes": {
                  "class": "ms-bgColor-themePrimary"
                },
                "children": [
                  {
                    "elmType": "div",
                    "txtContent": "= [$Title] + '♯'",
                    "style": {
                      "font-size": "30px",
                      "font-weight": "bold"
                    },
                    "attributes": {
                      "class": "ms-fontColor-white"
                    }
                  }
                ]
              }
            }
          }
        ]
      }
    ]
  }
}