/* ==========================================================
   MoneyTool Grid System
   ========================================================== */


/* =====================================
   Flex Helpers
===================================== */

.flex{

    display:flex;

}

.flex-wrap{

    flex-wrap:wrap;

}

.flex-column{

    flex-direction:column;

}

.items-center{

    align-items:center;

}

.items-start{

    align-items:flex-start;

}

.items-end{

    align-items:flex-end;

}

.justify-center{

    justify-content:center;

}

.justify-between{

    justify-content:space-between;

}

.justify-around{

    justify-content:space-around;

}

.justify-end{

    justify-content:flex-end;

}

.gap-10{

    gap:10px;

}

.gap-20{

    gap:20px;

}

.gap-30{

    gap:30px;

}

.gap-40{

    gap:40px;

}


/* =====================================
   Grid Helpers
===================================== */

.grid{

    display:grid;

    gap:30px;

}

.grid-2{

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

}

.grid-3{

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

}

.grid-4{

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

}

.grid-5{

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

}

.grid-auto{

    grid-template-columns:

    repeat(auto-fit,minmax(280px,1fr));

}


/* =====================================
   Homepage Helpers
===================================== */

.hero-grid{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:70px;

    align-items:center;

}

.calculator-grid{

    display:grid;

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

    gap:30px;

}

.category-grid{

    display:grid;

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

    gap:25px;

}

.planning-grid{

    display:grid;

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

    gap:30px;

}

.feature-grid{

    display:grid;

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

    gap:30px;

}

.learning-grid{

    display:grid;

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

    gap:30px;

}

.guide-grid{

    display:grid;

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

    gap:30px;

}