* {
    line-height: 1.5em;
}

#IndexGrid {
    grid-template-columns: minmax(10px, 2fr) 30fr min-content 30fr minmax(10px, 2fr);
}
.TangoLogo {
    max-width: 40rem;
    width: 50vw;
}
.itemTangoLogo {
    grid-column: 2 / 5;
    grid-row: 1;
    text-align: center;
    font-size: 1.5rem;
}
.itemHeader {
    grid-column: 2 / 5;
    grid-row: 2;
    text-align: center;
    font-size: 1.1rem;
}

.imageHeader {
    text-align: center;
    font-size: 1.1rem;
    font-weight: bold;
    margin: 1.5rem;
}

.imageInfo {
    text-align: left;
    margin: 1.5rem;
    font-size: 1rem;
}

.imageSize {
  width: 100%;        
  height: auto;       
  max-width: 1500px;   
  max-height: 1024px;  
  object-fit: contain; 
  display: block;     
  margin: 0 auto;         
}

.scrollHandleLeft {
    height: min(5vw, 100px);
    width: auto;
    object-fit: contain;
    text-align: left;   
}

.scrollHandleRight {
    height: min(5vw, 100px);
    width: auto;
    object-fit: contain;
    text-align: right;   
}

.imageThumb {
    height: min(5vw, 100px);
    width: auto;
    object-fit: contain;
    margin-right: 0.5vw;
}

.imageThumbSelect {
    height: min(5vw, 100px);
    width: auto;
    object-fit: contain;
    border: 3px;
    border-style: solid;
    border-color: var(--main-border-color);
    margin-right: 0.5vw;
}

.imageScroll {
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1rem;
    border-bottom: 3px;
    border-bottom-style: solid;
    border-bottom-color: var(--main-border-color);
    border-top: 3px;
    border-top-style: solid;
    border-top-color: var(--main-border-color);
}
.topInfo {
    grid-column: 2 / 5;
    grid-row: 3;
}
.imageLinks {
    grid-column: 2 / 5;
    grid-row: 4;
}

.imageLinks a {
    color: var(--main-fnt-color);
}

.IMG_0_H {
    grid-column: 2 / 5;
    grid-row: 5;
}

.IMG_0_C {
    grid-column: 2 / 5;
    grid-row: 6;
}

.IMG_1_H {
    grid-column: 2 / 5;
    grid-row: 7;
}

.IMG_1_C {
    grid-column: 2 / 5;
    grid-row: 8;
}

.IMG_2_H {
    grid-column: 2 / 5;
    grid-row: 9;
}

.IMG_2_C {
    grid-column: 2 / 5;
    grid-row: 10;
}

.IMG_3_H {
    grid-column: 2 / 5;
    grid-row: 11;
}

.IMG_3_C {
    grid-column: 2 / 5;
    grid-row: 12;
}

.IMG_4_H {
    grid-column: 2 / 5;
    grid-row: 13;
}

.IMG_4_C {
    grid-column: 2 / 5;
    grid-row: 14;
}

.IMG_5_H {
    grid-column: 2 / 5;
    grid-row: 15;
}

.IMG_5_C {
    grid-column: 2 / 5;
    grid-row: 16;
}

.IMG_6_H {
    grid-column: 2 / 5;
    grid-row: 17;
}

.IMG_6_C {
    grid-column: 2 / 5;
    grid-row: 18;
}

.IMG_7_H {
    grid-column: 2 / 5;
    grid-row: 19;
}

.IMG_7_C {
    grid-column: 2 / 5;
    grid-row: 20;
}

.IMG_8_H {
    grid-column: 2 / 5;
    grid-row: 21;
}

.IMG_8_C {
    grid-column: 2 / 5;
    grid-row: 22;
}

.IMG_9_H {
    grid-column: 2 / 5;
    grid-row: 23;
}

.IMG_9_C {
    grid-column: 2 / 5;
    grid-row: 24;
}

@media screen and (min-width: 600px) {
    #IndexGrid {
        grid-template-columns: 5% 15% 15% 15% 15% 15% 15% 5%;
    }
    .itemTangoLogo {
        grid-column: 2 / 8;
        grid-row: 1;
        text-align: center;
        font-size: 1.5rem;
    }
    .itemHeader {
        grid-column: 2 / 8;
        grid-row: 2;
        text-align: center;
        font-size: 1.5rem;
    }
    
    .topInfo {
        grid-column: 2 / 8;
        grid-row: 3;
    }

    .imageLinks {
        grid-column: 2 / 5;
        grid-row: 4;
    }    

    .IMG_0_H {
        grid-column: 2 / 8;
        grid-row: 5;
    }
    
    .IMG_0_C {
        grid-column: 2 / 8;
        grid-row: 6;
    }
    
    .IMG_1_H {
        grid-column: 2 / 8;
        grid-row: 7;
    }
    
    .IMG_1_C {
        grid-column: 2 / 8;
        grid-row: 8;
    }
    
    .IMG_2_H {
        grid-column: 2 / 8;
        grid-row: 9;
    }
    
    .IMG_2_C {
        grid-column: 2 / 8;
        grid-row: 10;
    }
    
    .IMG_3_H {
        grid-column: 2 / 8;
        grid-row: 11;
    }
    
    .IMG_3_C {
        grid-column: 2 / 8;
        grid-row: 12;
    }
    
    .IMG_4_H {
        grid-column: 2 / 8;
        grid-row: 13;
    }
    
    .IMG_4_C {
        grid-column: 2 / 8;
        grid-row: 14;
    }
    
    .IMG_5_H {
        grid-column: 2 / 8;
        grid-row: 15;
    }
    
    .IMG_5_C {
        grid-column: 2 / 8;
        grid-row: 16;
    }
    
    .IMG_6_H {
        grid-column: 2 / 8;
        grid-row: 17;
    }
    
    .IMG_6_C {
        grid-column: 2 / 8;
        grid-row: 18;
    }
    
    .IMG_7_H {
        grid-column: 2 / 8;
        grid-row: 19;
    }
    
    .IMG_7_C {
        grid-column: 2 / 8;
        grid-row: 20;
    }
    
    .IMG_8_H {
        grid-column: 2 / 8;
        grid-row: 21;
    }
    
    .IMG_8_C {
        grid-column: 2 / 8;
        grid-row: 22;
    }
    
    .IMG_9_H {
        grid-column: 2 / 8;
        grid-row: 23;
    }
    
    .IMG_9_C {
        grid-column: 2 / 8;
        grid-row: 24;
    }

    
}