/*
 * Base 4*5 grid
 *
 * medium
 */
.grid-item {
   --grid-item-height: 204px;
   --grid-item-width: 189px;

   height: var(--grid-item-height);
   width: var(--grid-item-width);
}
.grid-item[data-colspan='2'] { width: calc(var(--grid-item-width) * 2); }
.grid-item[data-colspan='3'] { width: calc(var(--grid-item-width) * 3); }
.grid-item[data-colspan='4'] { width: calc(var(--grid-item-width) * 4); }
.grid-item[data-colspan='5'] { width: calc(var(--grid-item-width) * 5); }
.grid-item[data-colspan='6'] { width: calc(var(--grid-item-width) * 6); }
.grid-item[data-colspan='7'] { width: calc(var(--grid-item-width) * 7); }
.grid-item[data-colspan='8'] { width: calc(var(--grid-item-width) * 8); }
.grid-item[data-colspan='9'] { width: calc(var(--grid-item-width) * 9); }
.grid-item[data-colspan='10'] { width: calc(var(--grid-item-width) * 10); }

.grid-item[data-rowspan='2'] { height: calc(var(--grid-item-height) * 2); }
.grid-item[data-rowspan='3'] { height: calc(var(--grid-item-height) * 3); }
.grid-item[data-rowspan='4'] { height: calc(var(--grid-item-height) * 4); }


/*
 * chart_view
 */
.page-container[data-page='chart_view'] .grid-item {
   --grid-item-height: 102px;
   --grid-item-width: 236px;
}

@media only screen and (min-width: 3840px) and (max-width: 4092px)
{
   .grid-item {
      --grid-item-height: 408px;
      --grid-item-width: 378px;

      padding-right: 20px;
      padding-bottom: 20px;
   }

   .grid-item-container > .grid-item-content {
      /padding: 62px 12px 12px 12px;
   }
}