.grid-mobile {
    color:black;
    display: block;
    padding-bottom: 80px; 
    text-align: left;
}
.detail-text {
    color:black;
    font-family: Arial Black, Arial Bold, sans-serif;
    text-align: left;
}

.main-grid {
    display: none;
}

.sankyo-7-back-mobile{
    /*padding-right: 80%;*/
    max-height: 80px;
}

.sankyo-7-watch-now {
    display: inline;
    max-height: 80px;
    text-align: right;
}

.sankyo-7-back-mobile-header{
    background-color: black;
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: 1fr; 
    gap: 0px 0px; 
    width:100%;
}

.grid-1 {
    display: none;
}
.intro {
    display: none;
}

html,body{
    overflow-x: hidden;
}

a {
    text-decoration: underline;
}

@media only screen and (min-width: 768px) {
    .grid-mobile {
        display: none;
    }
    
    .main-grid {
        display:grid;
        grid-template-columns: repeat(20, 1fr);
        grid-template-rows: repeat(12, 5vw);
        column-gap: 0;
        row-gap: 0;
        padding:0px;
        align-content: inherit;
        background-image: url(/images/sankyo-7-background-desktop.jpg);
        background-size: contain;
    }

    .main-grid img {
        display: inherit;
        max-height:100%;
        max-width:100%;
    }
    .main-grid div {
        align-content: inherit;
    }


    .detail {
        background-size:100% 100%;
        display:none;
        color:white;
    }
    .detail-text {
        padding: 10%;
        padding-top:5%;
        padding-left:50%;
        font-family: Arial Black, Arial Bold, sans-serif;
        font-size: 0.9vw;
        color:white;
    }



    #back-button {
        grid-column: 2/ span 3;
        grid-row: 2/ span 2;
    }


    #momo-joanie{
        grid-column: 8/ span 3;
        grid-row: 5 / span 2;
    }
    #momo-joanie-bubble{
        grid-column: 10 /span 9;
        grid-row: 4/ span 5;
    }
    #momo-joanie:hover + #momo-joanie-bubble{
        display:block;
        background-image: url(/images/Bmomojoanie.png);
    }
    #momo-joanie-bubble:hover {
        display: block;
        background-image: url(/images/Bmomojoanie.png);

    }


    
    

    #ron{
        grid-column: 6/ span 2;
        grid-row: 5 / span 3;
    }
    #ron-bubble{
        grid-column: 8 /span 9;
        grid-row: 5/ span 5;
    }
    #ron:hover + #ron-bubble{
        display:block;
        background-image: url(/images/Bron.png);
    }
    #ron-bubble:hover {
        display: block;
        background-image: url(/images/Bron.png);

    }
    
    #paperboy{
        grid-column: 5/ span 3;
        grid-row: 8 / span 3;
    }
    #paperboy-bubble{
        grid-column: 7 /span 8;
        grid-row: 7/ span 4;
    }
    #paperboy:hover + #paperboy-bubble{
        display:block;
        background-image: url(/images/Bpaperboy.png);
    }
    #paperboy-bubble:hover {
        display: block;
        background-image: url(/images/Bpaperboy.png);

    }

    #thomasnoahtheo{
        grid-column: 3/ span 3;
        grid-row: 5 / span 7;
    }
    #thomasnoahtheo-bubble{
        grid-column: 6 /span 8;
        grid-row: 5/ span 4;
    }
    #thomasnoahtheo:hover + #thomasnoahtheo-bubble{
        display:block;
        background-image: url(/images/Bthomasnoahtheo.png);
    }
    #thomasnoahtheo-bubble:hover {
        display: block;
        background-image: url(/images/Bthomasnoahtheo.png);

    }

    #janeraf{
        grid-column: 8/ span 3;
        grid-row: 7 / span 3;
    }
    #janeraf-bubble{
        grid-column: 11 /span 9;
        grid-row: 7/ span 5;
    }
    #janeraf:hover + #janeraf-bubble{
        display:block;
        background-image: url(/images/Bjaneraf.png);
    }
    #janeraf-bubble:hover {
        display: block;
        background-image: url(/images/Bjaneraf.png);

    }

    #jessejustin{
        grid-column: 13/ span 3;
        grid-row: 5 / span 7;
    }
    #jessejustin-bubble{
        grid-column: 14 /span 8;
        grid-row: 7/ span 4;
    }
    #jessejustin:hover + #jessejustin-bubble{
        display:block;
        background-image: url(/images/Bjessejustin.png);
    }
    #jessejustin-bubble:hover {
        display: block;
        background-image: url(/images/Bjessejustin.png);

    }

    #lyla-isabel{
        grid-column: 11/ span 2;
        grid-row: 6 / span 5;
    }
    #lyla-isabel-bubble{
        grid-column: 12 /span 9;
        grid-row: 5/ span 5;
    }
    #lyla-isabel:hover + #lyla-isabel-bubble{
        display:block;
        background-image: url(/images/Blylaisabel.png);
    }
    #lyla-isabel-bubble:hover {
        display: block;
        background-image: url(/images/Blylaisabel.png);

    }

    #ss7-header-vimeo {
        display:block;
        grid-column: 7/ span 8;
        grid-row: 1/ span 4;
    }

    #watch-now {
        display: block;
        grid-column: 10/ span 7;
        grid-row: 2/ span 3;
        margin-bottom: 5%;
    }

}