/* ==========================================================
   DESKTOP
   >= 1200px
	========================================================== */

@media (min-width:1200px){
	
	
	.hero{
			display:flex;
		}

		.hero-mobile{
			display:none;
		}

    .container{

        max-width:var(--container-xl);

    }


/* =====================================
   HERO
===================================== */

.hero{

    display:flex;

    align-items:center;

    min-height:650px;

    padding-top:0rem;

    padding-bottom:2rem;

}

.hero-grid{

    display:grid;

    grid-template-columns:480px 1fr;

    align-items:center;

    justify-content:space-between;

    column-gap:0;

}

.hero-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    max-width:480px;

    margin:0 auto;

}

.hero h1{

    max-width:10ch;

    margin:0 0 1.75rem;

}

.hero p{

    max-width:450px;

    margin:0 0 2.2rem;

}

.hero-actions{

    display:flex;

    justify-content:center;

    gap:1rem;

}

.hero-image{

    display:flex;

    justify-content:flex-start;

    align-items:center;

    margin-left:-20px;

}

.hero-mockup{

    display:block;

    width:95%;

    max-width:860px;

    height:auto;

}


    /* =====================================
       SECTION TITLE
    ===================================== */

    .section-title{

        max-width:760px;

        margin-inline:auto;

        text-align:center;

    }

    /* =====================================
       GRID
    ===================================== */

    .grid-2-desktop{

        display:grid;

        grid-template-columns:repeat(2,1fr);

        gap:var(--space-8);

    }

    .grid-3-desktop{

        display:grid;

        grid-template-columns:repeat(3,1fr);

        gap:var(--space-8);

    }

    .grid-4-desktop{

        display:grid;

        grid-template-columns:repeat(4,1fr);

        gap:var(--space-8);

    }

    /* =====================================
       CARDS
    ===================================== */

    .card{

        height:100%;

    }

    /* =====================================
       FOOTER
    ===================================== */

    .footer-grid{

        display:grid;

        grid-template-columns:

        2fr

        1fr

        1fr

        1fr;

        gap:var(--space-10);

    }

}