.gridBody {
    display                    : grid;
    grid-gap                   : var(--body-padding) var(--body-padding);
    grid-template-columns      : 1fr;
    grid-auto-rows             : max-content;
    align-content              : start;
    background-color           : var(--body-background);
    overflow-x                 : hidden;
    overflow-y                 : scroll;
    scrollbar-width            : none;
    -ms-overflow-style         : none;
    -webkit-overflow-scrolling : touch;
}

.gridBody::-webkit-scrollbar {
    width  : 0;
    height : 0;
}

.gridItem {
    position         : relative;
    background-color : var(--image-background);
    box-shadow       : 0 4px 8px 0 rgba(0,0,0,0.2), 0 4px 8px 0 rgba(0,0,0,0.19);
}

.gridItem:last-of-type {
    border-bottom : var(--body-padding);
}

.imgPicture {
    position : relative;
}

.imgData {
    padding : calc(0.25 * var(--image-text-padding)) var(--image-text-padding); 
}

.imgHeader {
    color       : var(--image-header-color);
    font-size   : var(--image-header-font);
    font-weight : bold;
    text-align  : center;
}

.imgDetail {
    color       : var(--image-detail-color);
    font-size   : var(--image-detail-font);
    font-weight : normal;
    text-align  : left;
    padding-top : calc(0.5 * var(--image-text-padding));
}

#videoContainer {
    position         : fixed;
    top              : var(--header-height);
    width            : 100%;
    height           : 0;
    background-color : #000;
    text-align       : center;
    transition       : 0.5s;
    z-index          : 1;
}

#videoPlayer {
    transition : 0.5s;
}

.icon-player {
    position : absolute;
    left     : 40%;
    top      : 40%;
    width    : 20%;
    height   : 20%;
    cursor   : pointer;
}

.icon-close-player {
    position : absolute;
    right    : 5px;
    top      : 5px;
    width    : 40px;
    height   : 40px;
    cursor   : pointer;
    z-index  : 2;
}

@media screen and (orientation:portrait) {
    .gridItem    { clear : both; float : left; }
    .imgPicture  { width : 40%;  float : left; }
    .imgData     { width : 60%;  float : left; }
    .imgHeader   { padding : 0; }
    .imgDetail   { padding-top : var(--image-text-padding); }
    .icon-player { width : 30%; height : 30%; left : 35%; top : 35%; }
    #pageFooter  { font-size : calc(0.40 * var(--footer-height)); }
}

@media screen and (min-width:600px) and (orientation:landscape) {
    .gridBody { grid-template-columns : 1fr 1fr; }
}

@media screen and (min-width:1000px) and (orientation:landscape) {
    .gridBody { grid-template-columns : 1fr 1fr 1fr; }
}

@media screen and (min-width:1400px) and (orientation:landscape) {
    .gridBody { grid-template-columns : 1fr 1fr 1fr 1fr; }
}