@property --flex-rows {
  syntax: "<integer>";
  inherits: false;
  initial-value: 1;
}

@property --flex-columns {
  syntax: "<integer>";
  inherits: false;
  initial-value: 1;
}

@property --row-span {
  syntax: "<integer>";
  inherits: false;
  initial-value: 1;
}

@property --col-span {
  syntax: "<integer>";
  inherits: false;
  initial-value: 1;
}

@property --row-position {
  syntax: "<integer> | auto";
  inherits: false;
  initial-value: 1;
}

@property --col-position {
  syntax: "<integer> | auto";
  inherits: false;
  initial-value: 1;
}

html {
    --col-position: auto;
    --row-position: auto;
    --col-span: 1;
    --row-span: 1;
}
  
@media (max-width: 12800px) {
    .cols-aside { --cols-aside: 1; }
    .cols-noside { --cols-aside: 0; }

    .rows-8 { --flex-rows: 8; }
    .rows-7 { --flex-rows: 7; }
    .rows-6 { --flex-rows: 6; }
    .rows-5 { --flex-rows: 5; }
    .rows-4 { --flex-rows: 4; }
    .rows-3 { --flex-rows: 3; }
    .rows-2 { --flex-rows: 2; }
    .rows-1 { --flex-rows: 1; }

    .cols-4 { --flex-columns: 4; }
    .cols-3 { --flex-columns: 3; }
    .cols-2 { --flex-columns: 2; }
    .cols-1 { --flex-columns: 1; }

    .col-p_a { --col-position: auto; }
    .col-p_1 { --col-position: 1; }
    .col-p_2 { --col-position: 2; }
    .col-p_3 { --col-position: 3; }
    .col-p_4 { --col-position: 4; }

    .col-span_1 { --col-span: 1; }
    .col-span_2 { --col-span: 2; }
    .col-span_3 { --col-span: 3; }
    .col-span_4 { --col-span: 4; }

    .row-p_a { --row-position: auto; }
    .row-p_1 { --row-position: 1; }
    .row-p_2 { --row-position: 2; }
    .row-p_3 { --row-position: 3; }
    .row-p_4 { --row-position: 4; }
    .row-p_5 { --row-position: 5; }
    .row-p_6 { --row-position: 6; }
    .row-p_7 { --row-position: 7; }
    .row-p_8 { --row-position: 8; }

    .row-span_1 { --row-span: 1; }
    .row-span_2 { --row-span: 2; }
    .row-span_3 { --row-span: 3; }
    .row-span_4 { --row-span: 4; }
    .row-span_5 { --row-span: 5; }
    .row-span_6 { --row-span: 6; }
    .row-span_7 { --row-span: 7; }
    .row-span_8 { --row-span: 8; }

    .grid-gap_32 { gap: 32px; }
    .grid-gap_16 { gap: 16px; }
    .grid-gap_8 { gap: 8px; }
    .grid-gap_0 { gap: 0px; }      
}

@media (max-width: 1279px) {
    .lg-cols-aside { --cols-aside: 1; }
    .lg-cols-noside { --cols-aside: 0; }

    .lg-cols-4 { --flex-columns: 4; }
    .lg-cols-3 { --flex-columns: 3; }
    .lg-cols-2 { --flex-columns: 2; }
    .lg-cols-1 { --flex-columns: 1; }

    .lg-col-p_a { --col-position: auto; }
    .lg-col-p_1 { --col-position: 1; }
    .lg-col-p_2 { --col-position: 2; }
    .lg-col-p_3 { --col-position: 3; }
    .lg-col-p_4 { --col-position: 4; }

    .lg-col-span_1 { --col-span: 1; }
    .lg-col-span_2 { --col-span: 2; }
    .lg-col-span_3 { --col-span: 3; }
    .lg-col-span_4 { --col-span: 4; }

    .lg-row-p_a { --row-position: auto; }
    .lg-row-p_1 { --row-position: 1; }
    .lg-row-p_2 { --row-position: 2; }
    .lg-row-p_3 { --row-position: 3; }
    .lg-row-p_4 { --row-position: 4; }
    .lg-row-p_5 { --row-position: 5; }
    .lg-row-p_6 { --row-position: 6; }
    .lg-row-p_7 { --row-position: 7; }
    .lg-row-p_8 { --row-position: 8; }

    .lg-row-span_1 { --row-span: 1; }
    .lg-row-span_2 { --row-span: 2; }
    .lg-row-span_3 { --row-span: 3; }
    .lg-row-span_4 { --row-span: 4; }
    .lg-row-span_5 { --row-span: 5; }
    .lg-row-span_6 { --row-span: 6; }
    .lg-row-span_7 { --row-span: 7; }
    .lg-row-span_8 { --row-span: 8; }

    .lg-grid-gap_32 { gap: 32px; }
    .lg-grid-gap_16 { gap: 16px; }
    .lg-grid-gap_8 { gap: 8px; }
    .lg-grid-gap_0 { gap: 0px; }      
}

@media (max-width: 1023px) {
    .md-cols-aside { --cols-aside: 1; }
    .md-cols-noside { --cols-aside: 0; }

    .md-cols-4 { --flex-columns: 4; }
    .md-cols-3 { --flex-columns: 3; }
    .md-cols-2 { --flex-columns: 2; }
    .md-cols-1 { --flex-columns: 1; }

    .md-col-p_a { --col-position: auto; }
    .md-col-p_1 { --col-position: 1; }
    .md-col-p_2 { --col-position: 2; }
    .md-col-p_3 { --col-position: 3; }
    .md-col-p_4 { --col-position: 4; }

    .md-col-span_1 { --col-span: 1; }
    .md-col-span_2 { --col-span: 2; }
    .md-col-span_3 { --col-span: 3; }
    .md-col-span_4 { --col-span: 4; }

    .md-row-p_a { --row-position: auto; }
    .md-row-p_1 { --row-position: 1; }
    .md-row-p_2 { --row-position: 2; }
    .md-row-p_3 { --row-position: 3; }
    .md-row-p_4 { --row-position: 4; }
    .md-row-p_5 { --row-position: 5; }
    .md-row-p_6 { --row-position: 6; }
    .md-row-p_7 { --row-position: 7; }
    .md-row-p_8 { --row-position: 8; }

    .md-row-span_1 { --row-span: 1; }
    .md-row-span_2 { --row-span: 2; }
    .md-row-span_3 { --row-span: 3; }
    .md-row-span_4 { --row-span: 4; }
    .md-row-span_5 { --row-span: 5; }
    .md-row-span_6 { --row-span: 6; }
    .md-row-span_7 { --row-span: 7; }
    .md-row-span_8 { --row-span: 8; }

    .md-grid-gap_32 { gap: 32px; }
    .md-grid-gap_16 { gap: 16px; }
    .md-grid-gap_8 { gap: 8px; }
    .md-grid-gap_0 { gap: 0px; }            
}

@media (max-width: 767px) {
    .sm-cols-aside { --cols-aside: 1; }
    .sm-cols-noside { --cols-aside: 0; }

    .sm-cols-4 { --flex-columns: 4; }
    .sm-cols-3 { --flex-columns: 3; }
    .sm-cols-2 { --flex-columns: 2; }
    .sm-cols-1 { --flex-columns: 1; }

    .sm-col-p_a { --col-position: auto; }
    .sm-col-p_1 { --col-position: 1; }
    .sm-col-p_2 { --col-position: 2; }
    .sm-col-p_3 { --col-position: 3; }
    .sm-col-p_4 { --col-position: 4; }

    .sm-col-span_1 { --col-span: 1; }
    .sm-col-span_2 { --col-span: 2; }
    .sm-col-span_3 { --col-span: 3; }
    .sm-col-span_4 { --col-span: 4; }

    .sm-row-p_a { --row-position: auto; }
    .sm-row-p_1 { --row-position: 1; }
    .sm-row-p_2 { --row-position: 2; }
    .sm-row-p_3 { --row-position: 3; }
    .sm-row-p_4 { --row-position: 4; }
    .sm-row-p_5 { --row-position: 5; }
    .sm-row-p_6 { --row-position: 6; }
    .sm-row-p_7 { --row-position: 7; }
    .sm-row-p_8 { --row-position: 8; }

    .sm-row-span_1 { --row-span: 1; }
    .sm-row-span_2 { --row-span: 2; }
    .sm-row-span_3 { --row-span: 3; }
    .sm-row-span_4 { --row-span: 4; }
    .sm-row-span_5 { --row-span: 5; }
    .sm-row-span_6 { --row-span: 6; }
    .sm-row-span_7 { --row-span: 7; }
    .sm-row-span_8 { --row-span: 8; }

    .sm-grid-gap_32 { gap: 32px; }
    .sm-grid-gap_16 { gap: 16px; }
    .sm-grid-gap_8 { gap: 8px; }
    .sm-grid-gap_0 { gap: 0px; }            
}
  
@media (max-width: 639px) {
    .xs-cols-aside { --cols-aside: 1; }
    .xs-cols-noside { --cols-aside: 0; }

    .xs-cols-4 { --flex-columns: 4; }
    .xs-cols-3 { --flex-columns: 3; }
    .xs-cols-2 { --flex-columns: 2; }
    .xs-cols-1 { --flex-columns: 1; }

    .xs-col-p_a { --col-position: auto; }
    .xs-col-p_1 { --col-position: 1; }
    .xs-col-p_2 { --col-position: 2; }
    .xs-col-p_3 { --col-position: 3; }
    .xs-col-p_4 { --col-position: 4; }

    .xs-col-span_1 { --col-span: 1; }
    .xs-col-span_2 { --col-span: 2; }
    .xs-col-span_3 { --col-span: 3; }
    .xs-col-span_4 { --col-span: 4; }

    .xs-row-p_a { --row-position: auto; }
    .xs-row-p_1 { --row-position: 1; }
    .xs-row-p_2 { --row-position: 2; }
    .xs-row-p_3 { --row-position: 3; }
    .xs-row-p_4 { --row-position: 4; }
    .xs-row-p_5 { --row-position: 5; }
    .xs-row-p_6 { --row-position: 6; }
    .xs-row-p_7 { --row-position: 7; }
    .xs-row-p_8 { --row-position: 8; }

    .xs-row-span_1 { --row-span: 1; }
    .xs-row-span_2 { --row-span: 2; }
    .xs-row-span_3 { --row-span: 3; }
    .xs-row-span_4 { --row-span: 4; }
    .xs-row-span_5 { --row-span: 5; }
    .xs-row-span_6 { --row-span: 6; }
    .xs-row-span_7 { --row-span: 7; }
    .xs-row-span_8 { --row-span: 8; }

    .xs-grid-gap_32 { gap: 32px; }
    .xs-grid-gap_16 { gap: 16px; }
    .xs-grid-gap_8 { gap: 8px; }
    .xs-grid-gap_0 { gap: 0px; }            
}
  
.grid-parent.grid-aside { grid-template-columns: repeat(var(--flex-columns), minmax(0, 1fr)) repeat(var(--cols-aside), 300px); }
.grid-parent:not(.grid-aside):not(.grid-auto) { grid-template-columns: repeat(var(--flex-columns), minmax(0, 1fr)) ; }
.grid-parent.grid-auto { grid-template-columns: repeat(var(--flex-columns), auto) !important ; }

.rows-1,.rows-2,.rows-3,.rows-4,.rows-5,.rows-6,.rows-7,.rows-8 { grid-template-rows: repeat(var(--flex-rows), auto) ; }
.grid-columns-subgrid {
    grid-template-columns: subgrid;
}
.grid-rows-subgrid {
    grid-template-rows: subgrid;
}

.grid-child {
    grid-row: var(--row-position) / span var(--row-span) !important;
    grid-column: var(--col-position) / span var(--col-span) !important;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.align-self-stretch {
    align-self: stretch !important;
  }
  
.flex-no-shrink {
    flex-shrink: 0;
}

.flex-grow {
    flex-grow: 1;
}

.tabbed-grid-item summary {
  display: none;
}
.tabbed-grid-item:not(:open) {
  display: none;
}