@media all and (min-width: 768px) {
    :root {
        --grid-tab-overview-rows: 3.5em calc(0.4 * var(--height-card-img)) calc(0.6 * var(--height-card-img));
    }
    @media all and (orientation: portrait) {
        :root {
            --grid-tab-overview-cols: 50% 50%;
            --grid-tab-overview-rows: 3.5em var(--height-card-img) auto;
        }
    }
}

@media all and (min-width: 768px) {
    .nac-adv-cont {        
        grid-template-columns: 100%;
        grid-template-rows: auto auto;
    }
    @media all and (orientation: portrait) {
        .nac-adv-cont {        
            grid-template-columns: 50% 50%;
            grid-template-rows: 100%;
        }
    }
}


/* ---------- selected color card ---------- */
#nac_card_my_color {
    background: #00336F;
}

#nac_img_card {
    background: #00336F;
}

/* ---------- color hue ---------- */
#nac_adv_col_hue_text {
    padding: 0 var(--padd-stand);
    margin-bottom: 0;
}

.nac-adv-hue-text-cont {    
    align-items: flex-start;
}
@media all and (min-width: 768px) {
    .nac-adv-hue-text-cont {
        /*height: 5.5em;*/
    }
}
#nac_adv_col_hue_text {
    background: none;
}

#nac_adv_col_hue1_text, #nac_adv_col_hue2_text, #nac_adv_col_sat_text {
    padding: 0 var(--padd-stand);
    text-align: center;
    background: none;
}

#nac_adv_col_hue1_swatch, #nac_adv_col_hue2_swatch {
    border-radius: 50%; 
    margin: 0.2em auto 0 auto;
}
#nac_adv_col_hue1_swatch {
    width: 1.5em;
    height: 1.5em;
    background-color: #00ff00;
}
#nac_adv_col_hue2_swatch {
    width: 1.5em;
    height: 1.5em;
    background-color: #00ffff;
}

/* -------------- composition -------------- */
#comp_cont {
    width: auto;
    height: auto;
    padding: var(--padd-stand);
    /*background: white;*/
}

.aac-overview-shades {
    display: grid;
}

.aac-compo-table {
    border-collapse: collapse;
}
.aac-compo-table td, .aac-compo-table th {
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid var(--col-accent2);
}
.aac-compo-table th h5 {
    font-weight: 600;
}
.aac-compo-table h5 {
    padding: 0.2em var(--padd-stand);
}

.aac-compo-table tr:hover {
    background: var(--col-accent1-ll);
}

/* -------------- color swatch -------------- */
@media all and (min-width: 768px) {
    .nac-col-card {        
        width: 90%;
        height: 5vh;
        max-width: 600px;
    }
    @media all and (orientation: portrait) {
        .nac-adv-cont .nac-adv-cont-1:nth-child(1) {
            order: 2;
        }
        .nac-col-card {        
            width: 100%;
        }
    }
}