@charset "UTF-8";

*.clsPhotoBox { text-align : center ; }

*.clsPhotoBody { width : 100% ; }


/* For PC or Tablet */
@media screen and ( min-width : 481px )
{
    *.clsLectureGrid
    {
        display               : grid ;
        grid-template-columns : 31% 31% 31% ;
        grid-template-rows    : auto auto auto auto ;
        grid-column-gap       : 3.5% ;
     }

    *.clsPhotoBox
    {
        align-self   : end ;
        border-style : none ;
        border-color : red ;
        border-width : thin ;
    }

    *.clsPhotoBox1 { grid-area : 1 / 1 / span 1 / span 1 ; }
    *.clsPhotoBox2 { grid-area : 1 / 2 / span 1 / span 1 ; }
    *.clsPhotoBox3 { grid-area : 1 / 3 / span 1 / span 1 ; }
    *.clsPhotoBox4 { grid-area : 3 / 1 / span 1 / span 1 ; }
    *.clsPhotoBox5 { grid-area : 3 / 2 / span 1 / span 1 ; }
    *.clsPhotoBox6 { grid-area : 3 / 3 / span 1 / span 1 ; }

    *.clsLabelBox
    {
        padding      : 0 0 1em 0 ;
        border-style : none ;
        border-color : green ;
        border-width : thin ;
    }

    *.clsLabelBox1 { grid-area : 2 / 1 / span 1 / span 1 ; }
    *.clsLabelBox2 { grid-area : 2 / 2 / span 1 / span 1 ; }
    *.clsLabelBox3 { grid-area : 2 / 3 / span 1 / span 1 ; }
    *.clsLabelBox4 { grid-area : 4 / 1 / span 1 / span 1 ; }
    *.clsLabelBox5 { grid-area : 4 / 2 / span 1 / span 1 ; }
    *.clsLabelBox6 { grid-area : 4 / 3 / span 1 / span 1 ; }
}


/* For Smartphone */
@media screen and ( max-width : 480px )
{
    h1 { font-size : large ; }

    *.clsLectureGrid
    {
        width                 : 98% ;
        margin                : auto ;
        display               : grid ;
        grid-template-columns : auto ;
        grid-template-rows    : auto auto auto auto auto auto auto auto auto auto auto auto ;
    }

    *.clsPhotoBox
    {
        align-self   : end ;
        border-style : none ;
        border-color : red ;
        border-width : thin ;
    }

    *.clsPhotoBox1 { grid-area :  1 / 1 / span 1 / span 1 ; }
    *.clsPhotoBox2 { grid-area :  3 / 1 / span 1 / span 1 ; }
    *.clsPhotoBox3 { grid-area :  5 / 1 / span 1 / span 1 ; }
    *.clsPhotoBox4 { grid-area :  7 / 1 / span 1 / span 1 ; }
    *.clsPhotoBox5 { grid-area :  9 / 1 / span 1 / span 1 ; }
    *.clsPhotoBox6 { grid-area : 11 / 1 / span 1 / span 1 ; }

    *.clsLabelBox
    {
        padding      : 0 0 1.5em 0 ;
        line-height  : 1.25em ;
        border-style : none ;
        border-color : green ;
        border-width : thin ;
    }

    *.clsLabelBox1 { grid-area :  2 / 1 / span 1 / span 1 ; }
    *.clsLabelBox2 { grid-area :  4 / 1 / span 1 / span 1 ; }
    *.clsLabelBox3 { grid-area :  6 / 1 / span 1 / span 1 ; }
    *.clsLabelBox4 { grid-area :  8 / 1 / span 1 / span 1 ; }
    *.clsLabelBox5 { grid-area : 10 / 1 / span 1 / span 1 ; }
    *.clsLabelBox6 { grid-area : 12 / 1 / span 1 / span 1 ; }
}