@charset "UTF-8";

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

*.clsPhotoBody
{
    width : 100% ;
}

*.clsLecturerBox
{
    text-align   : center ;
    border-style : none ;
    border-color : green ;
    border-width : thin ;
}

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


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

    *.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 ; }

    *.clsLecturerBox1 { grid-area : 2 / 1 / span 1 / span 1 ; }
    *.clsLecturerBox2 { grid-area : 2 / 2 / span 1 / span 1 ; }
    *.clsLecturerBox3 { grid-area : 2 / 3 / span 1 / span 1 ; }

    *.clsTitleBox1 { grid-area : 3 / 1 / span 1 / span 1 ; }
    *.clsTitleBox2 { grid-area : 3 / 2 / span 1 / span 1 ; }
    *.clsTitleBox3 { grid-area : 3 / 3 / span 1 / span 1 ; }
}


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

    *.clsLectureGrid
    {
        width  : 98% ;
        margin : auto ;
    }

}