/* ==========================================================
   HerGame Phoenix
   Responsive
   File: responsive.css
   ========================================================== */


/* ==========================================================
   ≤ 1200px
   ========================================================== */

@media (max-width: 1200px) {

    :root {
        --container-padding: 1.5rem;
    }

    .hero-grid {
        gap: var(--space-8);
    }

}


/* ==========================================================
   ≤ 992px
   ========================================================== */

@media (max-width: 992px) {

    h1 {
        font-size: 3rem;
    }

    h2 {
        font-size: 2.5rem;
    }

    .hero-grid,
    .spotlight-grid,
    .grid-2,
    .grid-3,
    .grid-4,
    .latest-stories-grid,
    .sports-universes-grid {
        grid-template-columns: 1fr;
    }

    .hero {
        min-height: auto;
        padding-top: var(--space-9);
    }

    .hero-image {
        margin-top: var(--space-8);
    }

}


/* ==========================================================
   ≤ 768px
   ========================================================== */

@media (max-width: 768px) {

    :root {

        --container-padding: 1.25rem;

        --header-height: 72px;

        --fs-4xl: 3rem;
        --fs-3xl: 2.4rem;
        --fs-2xl: 1.8rem;

    }

    section {
        padding: var(--space-9) 0;
    }

    .nav {
        min-height: var(--header-height);
    }

    .site-nav {
        display: none;
    }

    .btn {
        min-height: 44px;
        padding-inline: 1.4rem;
    }

}


/* ==========================================================
   ≤ 576px
   ========================================================== */

@media (max-width: 576px) {

    :root {

        --container-padding: 1rem;

        --fs-4xl: 2.5rem;
        --fs-3xl: 2rem;
        --fs-xl: 1.35rem;

    }

    .logo {
        font-size: 1.55rem;
    }

    .hero .lead {
        font-size: var(--fs-base);
    }

    .article-card__content {
        padding: var(--space-4);
    }

}
@media(max-width:1100px){

.hero-overlay{

left:30px;

bottom:30px;

width:440px;

}

.hero-overlay h1{

font-size:2.5rem;

}

}

@media(max-width:900px){

.hero-feature img{

height:500px;

}

.hero-overlay{

position:relative;

left:auto;

bottom:auto;

width:auto;

margin:20px;

}

.hero-bottom{

grid-template-columns:1fr;

}

}

@media(max-width:600px){

.hero-overlay{

padding:28px;

}

.hero-overlay h1{

font-size:2rem;

}

}