/* Navigation */

#main-nav .social {
    display: none;
}

#main-nav .container {
    /*grid-template-columns: 1fr;*/
    grid-template-columns: 3fr 6fr;
    grid-gap: 2.2rem;
}
#main-nav ul {
    /*align-self: flex-end; /* center vertically   */
    /*justify-self: flex-end;  /* center horizontally */
    /*display: flex; */
    margin-bottom: 18px;
    align-self: flex-end;
    justify-self: flex-end;
    margin-right: 1rem;

}
#main-nav ul li a {
    padding: .5rem;
}

/* Home Page */
#showcase {
    color: #fff;
    background: #333; /* var(--dark-color); /* #333; */
    padding: .5rem;
    position: relative;
}
#showcase .showcase-container {
    grid-template-columns: 1fr;
    justify-content: center;
    align-items: center;
    height: 50vh;

}
#showcase .showcase-content {
    z-index: 1;
    font-size: 1.1rem;
}

#showcase .showcase-content p {
    margin-bottom: .5rem;
}
#showcase .showcase-content a.btn {
    font-size: 1rem;
    padding: .3rem 1rem;
}

#home-articles .articles-container {
    grid-template-columns: 1fr;
    
}
#home-articles .articles-container > *:first-child {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
    grid-column: 1 / -1;
}

#home-videos .articles-container {
    grid-template-columns: 1fr;
    grid-gap: 1.5rem;
}

/* Footer */
#main-footer .footer-container {
    grid-template-rows: 150px 70px;
    grid-template-columns: 1fr;
    grid-gap: 1.5rem;
    grid-row-gap: .75rem;
    align-items: center;
    justify-items: center;
}
.footer_copyright {
    text-align: center;
    font-size: .6rem;

    grid-column: 1 / -1;
    padding-top: 1rem;
    padding-bottom: 1.2rem;
}

/* Sports Page */
.sports-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1.5rem;

    padding-bottom: 1.5rem;
}

/* About Page */
.page-container {
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
    grid-gap: 1.5rem;

    margin: 2rem 0;
  }
  .page-container > *:first-child {
    grid-row: 1/ span 3;
  }

.what-we-do-grid {
    grid-template-columns: 1fr;
    grid-gap: 3rem 1.5rem;
}

