#mainvisual{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    aspect-ratio: 5 / 3;
    overflow: hidden;
    margin: 20px auto 0px; 
    }

#mainvisual lottie-player{
    width: 100%;
    height: auto;
}



@media screen and (min-width: 834px) {
    .workpage_main{
        grid-template-columns: repeat(3, minmax(0, 1fr)) ;
        grid-template-rows: 300px 300px 1fr 300px 300px 300px 300px 300px 300px;
    }



    #itemA{
        grid-row: 1 / 3;
        grid-column: 1 / 4;
    }

    #itemB{
        grid-row: 3 / 6;
        grid-column: 1 / 4;
    }
    
    #itemC{
        grid-row: 6 / 8;
        grid-column: 1 / 4;
    }

    #itemD{
        grid-row: 8 / 10;
        grid-column: 1 / 4;
    }


}