:root{
    --container:1720px;


    --section-space:90px;

}

.container{

    width:min(var(--container),calc(100% - 48px));

    margin:0 auto;

}

section{

    position:relative;

    

}

.section-title{

    margin:0 0 38px;

    font-size:38px;

    font-weight:800;

    line-height:1.2;

    letter-spacing:-1px;

    color:#F4F6FF;

}

.section-subtitle{

    max-width:620px;

    margin-top:14px;

    color:#9AA8CB;

    font-size:17px;

    line-height:1.7;

}

.section-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    gap:30px;

    margin-bottom:42px;

}

.grid-2{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:32px;

}

.grid-3{

    display:grid;

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

    gap:28px;

}

.grid-4{

    display:grid;

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

    gap:24px;

}



.sidebar{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.sidebar-card{

    padding:24px;

    border-radius:22px;

    background:linear-gradient(
        180deg,
        #1B2143,
        #171D38
    );

    border:1px solid rgba(255,255,255,.05);

}

.page-spacing{

    margin-top:50px;

}

@media (max-width:1200px){

    .home-grid{

        grid-template-columns:1fr;

    }

    .grid-4{

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

    }

}

@media (max-width:900px){

    .grid-3{

        grid-template-columns:1fr;

    }

    .grid-2{

        grid-template-columns:1fr;

    }

}

@media (max-width:650px){

    :root{

        --section-space:65px;

    }

    .container{

        width:min(var(--container),calc(100% - 28px));

    }

    .section-title{

        font-size:30px;

    }

    .grid-4{

        grid-template-columns:1fr;

    }

}