@CHARSET "UTF-8";

*.clsLink
{
    text-align : center ;
    font-size  : x-large ;
}

*.clsHidden
{
    color : white ;
}

.clsImgBox
{
    text-align   : center ;
    align-self   : end ;
    padding      : 0 1.0em 0.25em 1.0em ;
    border-style : none ;
    border-color : red ;
    border-width : 1px ;
}

.clsImgBody
{
    width : 100% ;
}

*.clsLinkBox
{
    text-align   : center ;
    line-height  : 1.0em ;
    padding      : 0 0 1.75em 0 ;
    border-style : none ;
    border-color : green ;
    border-width : 1px ;
}


@media screen and ( min-width : 481px )
{
    *.clsMagazineArea
    {
        width                 : 600px ;
        display               : grid ;
        grid-template-columns : 50% 50% ;
        grid-template-rows    : auto auto auto auto auto auto auto auto auto auto ;
        margin                : auto ;
     }

*.clsImgBody { width : 90% ; }

    *.clsImgBox01 { grid-area :  1 / 1 / span 1 / span 1 ; }
    *.clsImgBox02 { grid-area :  1 / 2 / span 1 / span 1 ; }
    *.clsImgBox03 { grid-area :  3 / 1 / span 1 / span 1 ; }
    *.clsImgBox04 { grid-area :  3 / 2 / span 1 / span 1 ; }
    *.clsImgBox05 { grid-area :  5 / 1 / span 1 / span 1 ; }
    *.clsImgBox06 { grid-area :  5 / 2 / span 1 / span 1 ; }
    *.clsImgBox07 { grid-area :  7 / 1 / span 1 / span 1 ; }
    *.clsImgBox08 { grid-area :  7 / 2 / span 1 / span 1 ; }
    *.clsImgBox09 { grid-area :  9 / 1 / span 1 / span 1 ; }
    *.clsImgBox10 { grid-area :  9 / 2 / span 1 / span 1 ; }

    *.clsLinkBox01 { grid-area :  2 / 1 / span 1 / span 1 ; }
    *.clsLinkBox02 { grid-area :  2 / 2 / span 1 / span 1 ; }
    *.clsLinkBox03 { grid-area :  4 / 1 / span 1 / span 1 ; }
    *.clsLinkBox04 { grid-area :  4 / 2 / span 1 / span 1 ; }
    *.clsLinkBox05 { grid-area :  6 / 1 / span 1 / span 1 ; }
    *.clsLinkBox06 { grid-area :  6 / 2 / span 1 / span 1 ; }
    *.clsLinkBox07 { grid-area :  8 / 1 / span 1 / span 1 ; }
    *.clsLinkBox08 { grid-area :  8 / 2 / span 1 / span 1 ; }
    *.clsLinkBox09 { grid-area : 10 / 1 / span 1 / span 1 ; }
    *.clsLinkBox10 { grid-area : 10 / 2 / span 1 / span 1 ; }
}

@media screen and ( max-width : 480px )
{
    h1
    {
        font-size : x-large ;
    }

    *.clsMagazineArea
    {
        width  : 90% ;
        margin : auto ;
     }

}