/*---------------------------------------------------------------*/
/*'Home' page: Desktop-------------------------------------------*/
/*---------------------------------------------------------------*/

@media screen and (min-width: 1080px) {

    #main-page-title {
        font-size: 1.6em;
        padding-top: 200px;
        padding-left: 150px;
    }

    /*--------------------------------------------------------------------*/
    /*Sticky navigation bar on desktop------------------------------------*/
    /*--------------------------------------------------------------------*/

    /*Remove the page header to increase the main content viewport space when the navigation bar becomes sticky*/
    .nav-bar.sticky .company-name-JSON {
        display: none;
    }

    /*---------------------------------------------------------------*/
    /*'Featured News' grid-------------------------------------------*/
    /*---------------------------------------------------------------*/

    /*split featured news section into 4 column grids*/
    .featured-grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        gap: 20px;
        margin-top: 1.5em;
        padding-left: 150px;
        padding-right: 150px;
        min-width: 0px;
    }

    /*border padding and grid width set up*/
    .featured-grid-container>div {
        text-align: left;
        padding: 20px;
        max-width: 100%;
        box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.5);
    }

    /*setting up the first item (featured section) to occupy 2 by 2 times the space of other items*/
    .featured-item1 {
        grid-column: 1 / span 2;
        grid-row: 1/ span 2;
    }

    /*---------------------------------------------------------------*/
    /*'Bottom' grid--------------------------------------------------*/
    /*---------------------------------------------------------------*/

    /*Split screen to 3 parts*/
    .home-page-bottom-grid-container {
        display: grid;
        grid-template-columns: auto auto auto;
        gap: 20px;
        margin-top: 1.5em;
        padding-left: 150px;
        padding-right: 150px;
        padding-bottom: 50px;
        min-width: 0px;
    }

    /*border padding and grid width set up*/
    .home-page-bottom-grid-container>div {
        text-align: left;
        max-width: 100%;
    }

    /*setting up the first item (left grid) to occupy 2 by 2 times the space of other items*/
    .home-page-bottom-item1 {
        grid-column: 1 / span 2;
        grid-row: 1/ span 2;
        display: grid;
        grid-row-gap: 20px;
    }

    /*setting up the right grid*/
    .home-page-bottom-item2 {
        display: grid;
        grid-row-gap: 50px;
    }

    /*grid item for fanart section*/
    .home-page-bottom-item4 {
        padding: 20px;
        box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.5);
    }
    /*grid item for music section*/
    .home-page-bottom-item7 {
        padding: 20px;
        box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.5);
    }

    /*-------------------------------------------------------------------------------*/
    /*Style text to appear besides images--------------------------------------------*/
    /*-------------------------------------------------------------------------------*/

    /*container for text to appear besides image*/
    .image-side-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 20px;
        column-gap: 20px;
        box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.5);
        overflow: hidden;
    }

    /*prevent image from overflowing outside of it's supposed space*/
    .image-side-container img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /*Give image emphasis on hover*/
    .image-side-container img:hover {
        transform: scale(1.02);
    }
}

/*---------------------------------------------------------------*/
/*'Home' page: Mobile--------------------------------------------*/
/*---------------------------------------------------------------*/
@media screen and (max-width: 700px) {
    
    /*adjusting the position of title for mobile devices*/
    #main-page-title {
        font-size: 1.6em;
        padding-top: 200px;
        padding-left: 50px;
    }

    /*---------------------------------------------------------------*/
    /*'Featured News' grid-------------------------------------------*/
    /*---------------------------------------------------------------*/

    /*rearrange grid so it no longer split content into columns------*/
    .featured-grid-container {
        display: grid;
        grid-template-columns: auto;
        gap: 20px;
        margin-top: 1.5em;
        padding-left: 50px;
        padding-right: 50px;
        min-width: 0px;
    }

    /*border padding and grid width set up*/
    .featured-grid-container>div {
        text-align: left;
        padding: 20px;
        max-width: 100%;
        box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.5);
    }

    /*---------------------------------------------------------------*/
    /*'Bottom' grid--------------------------------------------------*/
    /*---------------------------------------------------------------*/

    /*rearrange grid so it no longer split content into columns------*/
    .home-page-bottom-grid-container {
        display: grid;
        grid-template-columns: auto;
        gap: 20px;
        margin-top: 1.5em;
        padding-left: 50px;
        padding-right: 50px;
        padding-bottom: 50px;
        min-width: 0px;
    }

    /*border padding and grid width set up*/
    .home-page-bottom-grid-container>div {
        text-align: left;
        max-width: 100%;
    }

    .home-page-bottom-item1 {
        display: grid;
        grid-row-gap: 20px;
    }

    .home-page-bottom-item2 {
        display: grid;
        grid-row-gap: 20px;
    }

    .home-page-bottom-item4 {
        padding: 20px;
        box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.5);
    }
    .home-page-bottom-item7 {
        padding: 20px;
        box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.5);
    }

    /*-------------------------------------------------------------------------------*/
    /*Style text to appear besides images--------------------------------------------*/
    /*-------------------------------------------------------------------------------*/

    /*modify container to have test below image on mobile*/
    .image-side-container {
        display: grid;
        grid-template-columns: 1fr;
        padding: 20px;
        column-gap: 20px;
        box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.5);
        overflow: hidden;
    }

    .image-side-container img {
        width: 100%;
        height: 100%;
        transition: all 0.4s ease-out;
    }

    /*Give image emphasis on hover*/
    .image-side-container img:hover {
        transform: scale(1.02);
    }
}

/*-------------------------------------------*/
/*'Home' page: Tablet------------------------*/
/*-------------------------------------------*/

@media screen and (min-width: 700px) and (max-width: 1080px) {

    #main-page-title {
        font-size: 1.6em;
        padding-top: 200px;
        padding-left: 50px;
    }

    /*---------------------------------------------------------------*/
    /*'Featured News' grid-------------------------------------------*/
    /*---------------------------------------------------------------*/

    /*split featured news section into 4 column grids*/
    .featured-grid-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-top: 1.5em;
        padding-left: 50px;
        padding-right: 50px;
        min-width: 0px;
    }

    /*border padding and grid width set up*/
    .featured-grid-container>div {
        text-align: left;
        padding: 20px;
        max-width: 100%;
        box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.5);
    }

    /*setting up the first item to occupy 2 by 2 times the space of other items*/
    .featured-item1 {
        grid-column: 1 / span 2;
        grid-row: 1/ span 2;
    }

    /*---------------------------------------------------------------*/
    /*'Bottom' grid--------------------------------------------------*/
    /*---------------------------------------------------------------*/

    /*grid spearate content to equal size columns--------------------*/
    .home-page-bottom-grid-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-top: 1.5em;
        padding-left: 100px;
        padding-right: 100px;
        padding-bottom: 50px;
        min-width: 0px;
    }

    /*border padding and grid width set up*/
    .home-page-bottom-grid-container>div {
        text-align: left;
        max-width: 100%;
    }

    .home-page-bottom-item1 {
        display: grid;
        grid-row-gap: 20px;
    }

    .home-page-bottom-item2 {
        display: grid;
        grid-row-gap: 20px;
    }

    .home-page-bottom-item4 {
        padding: 20px;
        box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.5);
        
    }
    .home-page-bottom-item7 {
        padding: 20px;
        box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.5);
    }

    /*-------------------------------------------------------------------------------*/
    /*Style text to appear besides images--------------------------------------------*/
    /*-------------------------------------------------------------------------------*/

    /*modify container to have text below image for smaller screen*/
    .image-side-container {
        display: grid;
        grid-template-columns: 1fr;
        padding: 20px;
        column-gap: 20px;
        box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.5);
        overflow: hidden;
    }

     .image-side-container img {
        width: 100%;
        height: 100%;
        transition: all 0.4s ease-out;
    }

    /*Give image emphasis on hover*/
    .image-side-container img:hover {
        transform: scale(1.02);
    }
}