/*
  ========================================
  Overview Colour Shades
  ========================================
*/

/* -------------- adjusting for right bar -------------- */
.it-page-cont-00 {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto auto 0 auto;
  grid-template-areas: 'it-cont-ad-0'
                      'it-page-title' 
                      'it-page-search'
                      'it-page-overview';
}
@media all and (min-width: 768px) { 
  .it-page-cont-00 {
      display: grid;
      grid-template-columns: 100% 0%;
      grid-template-rows: 0 auto auto;
      grid-template-areas: 'it-page-title it-cont-ad-0'
                          'it-page-search it-cont-ad-0' 
                          'it-page-overview it-cont-ad-0';
  }
  @media all and (orientation: portrait) {
      .it-page-cont-00 {
          grid-template-columns: 100%;
          grid-template-rows: auto 0 auto auto;
          grid-template-areas: 'it-cont-ad-0'
                              'it-page-title' 
                              'it-page-search'
                              'it-page-overview';
      }
  }
}
.it-page-title {
  grid-area: it-page-title;  
}
.it-page-search {
  grid-area: it-page-search;  
}
.it-page-overview {
  grid-area: it-page-overview;
  /*border: 1px solid red;*/
}
@media all and (min-width: 768px) { 
  .it-page-overview {
      padding: var(--padd-stand);
  }
}
.it-cont-ad-0 {
  height: 100%;
  width: 100%;  
  grid-area: it-cont-ad-0;
  /*border: 1px solid blue;*/
}
@media all and (min-width: 768px) {
  .it-cont-ad-0 {   
      padding: var(--padd-stand);
  }
}

/* -------------- main content -------------- */
:root {
    /* all */
    --grid-ratio-hue-tab: 3em auto;

    /* table with cards */
    --grid-table-hue: repeat(3, 33.33%);

    /* table with name and swatch */
    --grid-col-name-swatch: 3em 4em;
    
    /* each swatch */
    --height-swatch-max: 50vw;

    /* title of each swatch */
    --dist-swatch-text-top: 50%;
    --dist-swatch-text-left: 50%;
}
@media all and (min-width: 768px) {
    :root {
        /* table with cards */
        --grid-table-hue: repeat(6, 16.67%);

        /* table with name and swatch */
        --grid-col-name-swatch: 2.5em 4.5em;
    }
}

/* -------------- whole page -------------- */
.col-overview-page {
  height: auto;
  /*min-height: calc(100vh - var(--height-header));*/
  display: grid;
  grid-template-rows: var(--grid-ratio-hue-tab);
  grid-template-areas: 'huegr-title' 'huegr-overview';
  align-items: center;
  overflow: hidden;
}
.huegr-title {
  grid-area: huegr-title;
  height: 100%;
}
.huegr-overview {
  grid-area: huegr-overview;
}
.huegr-title, .huegr-overview {  
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ----------------- table title - description ----------------- */
.it-title-desc h2 {
  margin: auto;
  text-align: center;
}

/* ----------------- whole table with cards ----------------- */
.it-overview-cont {
  display: grid;
  grid-template-columns: var(--grid-table-hue);
  padding: 1em;
  margin-bottom: 0.5em;
}

.it-overview-cont > * {
  display: flex;
  margin: auto;
}

/* ----------------- colour swatch ----------------- */
.col-name-swatch {
  width: calc(100% - 1em);
  display: grid;
  grid-template-rows: var(--grid-col-name-swatch);
  padding: 0.5em 0 0 0;
}

.col-ns-title {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 0.5em;
}
.col-ns-title p {
  text-align: center;
  font-size: 0.9em;
  font-weight: bold;
  line-height: 1.1;
}

/* --------------- Ads ------------- */
.colgr-ad-hor {
  max-width: var(--width-max-page);
  margin: auto;
  padding: var(--padd-cont-0);
}
.it-cont-ad-1 {
  display: flex;
  height: auto;
  width: 100%;
  background: rgba(255, 255, 255, 0.5);
}