/*-------------------------------------------------------*/
/*'Current News' page CSS--------------------------------*/
/*-------------------------------------------------------*/

@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;
    }

    /*---------------------------------------------------------------*/
    /*'Current News' page main grid----------------------------------*/
    /*---------------------------------------------------------------*/

    /*split featured news section into 2 unequal column grids*/
    .current-grid-container {
        display: grid;
        grid-template-columns: 75% auto;
        gap: 10px;
        grid-column-gap: 50px;
        margin-top: 1.5em;
        padding-left: 150px;
        padding-right: 150px;
        padding-bottom: 50px;
        min-width: 0px;
    }

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

    /*left grid*/    
    .current-item1 {
        display: grid;
        grid-gap: 20px;
        grid-template-columns: 1fr 1fr;
    }

    /*right grid*/
    .current-item2 {
        display: grid;
        grid-gap: 50px;
    }

    /*featured item*/
    .current-item3 {
        grid-column: 1 / span 2;
        grid-row: 1/ span 2;
        padding: 20px;
        box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.5);
    }

    /*CSS for non-featured item*/
    .current-item4 {
        padding: 20px;
        box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.5);
    }

    /*CSS for breaking news card*/
    .current-item10 {
        padding: 20px;
        box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
        border-top: 1px solid black;
        border-left: 1px solid black;
        border-bottom: 1px solid black;
        border-right: 1px solid black;
    }

    /*CSS for game event card*/
    .current-item11 {
        padding: 20px;
        box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
        border-top: 1px solid black;
        border-left: 1px solid black;
        border-bottom: 1px solid black;
        border-right: 1px solid black;
    }

    /*CSS for community event card*/
    .current-item12 {
        padding: 20px;
        box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
        border-top: 1px solid black;
        border-left: 1px solid black;
        border-bottom: 1px solid black;
        border-right: 1px solid black;
    }

    /*CSS for twitter*/
    .current-item13 {
        overflow: auto
    }

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

    /*Style text to appear besides image*/
    .image-text-container {
        display: grid;
        grid-template-columns: 20px auto;
        column-gap: 20px;
        overflow: hidden;
    }

    /*keep image for overflowing from it's place*/
    .image-tex-container img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }


}
/*---------------------------------------------------------------*/
/*'Current News' page: Mobile------------------------------------*/
/*---------------------------------------------------------------*/
@media screen and (max-width: 700px) {

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

    /*---------------------------------------------------------------*/
    /*'Current News' page main grid----------------------------------*/
    /*---------------------------------------------------------------*/

    /*split featured news section into 2 unequal column grids*/
    .current-grid-container {
        display: grid;
        grid-template-columns: auto;
        gap: 10px;
        margin-top: 1.5em;
        padding-left: 50px;
        padding-right: 50px;
        padding-bottom: 50px;
        min-width: 0px;
    }

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

    /*left grid*/    
    .current-item1 {
        display: grid;
        grid-gap: 20px;
        grid-template-columns: 1fr;
    }

    /*right grid*/
    .current-item2 {
        display: grid;
        grid-gap: 50px;
    }

    /*featured item*/
    .current-item3 {
        padding: 20px;
        box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.5);
    }

    /*CSS for non-featured item*/
    .current-item4 {
        padding: 20px;
        box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.5);
    }

    /*CSS for breaking news card*/
    .current-item10 {
        padding: 20px;
        box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
        border-top: 1px solid black;
        border-left: 1px solid black;
        border-bottom: 1px solid black;
        border-right: 1px solid black;
    }

    /*CSS for game event card*/
    .current-item11 {
        padding: 20px;
        box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
        border-top: 1px solid black;
        border-left: 1px solid black;
        border-bottom: 1px solid black;
        border-right: 1px solid black;
    }

    /*CSS for community event card*/
    .current-item12 {
        padding: 20px;
        box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
        border-top: 1px solid black;
        border-left: 1px solid black;
        border-bottom: 1px solid black;
        border-right: 1px solid black;
    }

     /*CSS for twitter*/
     .current-item13 {
        overflow: auto
    }

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

    /*Style text to appear besides image*/
    .image-text-container {
        display: grid;
        grid-template-columns: 30px auto;
        column-gap: 20px;
        overflow: hidden;
    }

    /*keep image for overflowing from it's place*/
    .image-tex-container img {
        width: 100%;
        height: 100%;
        transition: all 0.4s ease-out;
    }


}

/*-------------------------------------------*/
/*'Current News' 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;
    }

    /*---------------------------------------------------------------*/
    /*'Current News' page main grid----------------------------------*/
    /*---------------------------------------------------------------*/

    /*split featured news section into 2 unequal column grids*/
    .current-grid-container {
        display: grid;
        grid-template-columns: 60% auto;
        gap: 10px;
        grid-column-gap: 50px;
        margin-top: 1.5em;
        padding-left: 50px;
        padding-right: 50px;
        padding-bottom: 50px;
        min-width: 0px;
    }

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

    /*left grid*/ 
    .current-item1 {
        display: grid;
        grid-gap: 20px;
        grid-template-columns: 1fr;
    }

    /*right grid*/
    .current-item2 {
        display: grid;
        grid-gap: 50px;
    }

    /*featured item*/
    .current-item3 {
        padding: 20px;
        box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.5);
    }

    /*CSS for non-featured item*/
    .current-item4 {
        padding: 20px;
        box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.5);
    }
    
    /*CSS for breaking news card*/
    .current-item10 {
        padding: 20px;
        box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
        border-top: 1px solid black;
        border-left: 1px solid black;
        border-bottom: 1px solid black;
        border-right: 1px solid black;
    }

    /*CSS for game event card*/
    .current-item11 {
        padding: 20px;
        box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
        border-top: 1px solid black;
        border-left: 1px solid black;
        border-bottom: 1px solid black;
        border-right: 1px solid black;
    }

    /*CSS for community event card*/
    .current-item12 {
        padding: 20px;
        box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
        border-top: 1px solid black;
        border-left: 1px solid black;
        border-bottom: 1px solid black;
        border-right: 1px solid black;
    }

    /*CSS for twitter*/
    .current-item13 {
        overflow: auto
    }

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

    /*Style text to appear besides image*/
    .image-text-container {
        display: grid;
        grid-template-columns: 30px auto;
        column-gap: 20px;
        overflow: hidden;
    }

    /*keep image for overflowing from it's place*/
    .image-tex-container img {
        width: 100%;
        height: 100%;
        transition: all 0.4s ease-out;
    }
}