/* ==========================================================
   MoneyTool Layout Container
   ========================================================== */

.container {
    width: 100%;
    max-width: var(--container-width, 1200px);
    margin-inline: auto;
    padding-inline: 20px;
    box-sizing: border-box;
}


/* ==========================================================
   Section Spacing
   ========================================================== */

.section {
    padding: 80px 0;
}

.section-sm {
    padding: 60px 0;
}

.section-lg {
    padding: 120px 0;
}


/* ==========================================================
   Content Width Helpers
   ========================================================== */

.content-sm {
    width: 100%;
    max-width: 700px;
    margin-inline: auto;
}

.content-md {
    width: 100%;
    max-width: 900px;
    margin-inline: auto;
}

.content-lg {
    width: 100%;
    max-width: 1100px;
    margin-inline: auto;
}


/* ==========================================================
   Text Alignment
   ========================================================== */

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}


/* ==========================================================
   Margin Helpers
   ========================================================== */

.mb-1 {
    margin-bottom: 10px;
}

.mb-2 {
    margin-bottom: 20px;
}

.mb-3 {
    margin-bottom: 30px;
}

.mb-4 {
    margin-bottom: 40px;
}

.mb-5 {
    margin-bottom: 60px;
}


/* ==========================================================
   Padding Helpers
   ========================================================== */

.pt-1 {
    padding-top: 20px;
}

.pt-2 {
    padding-top: 40px;
}

.pt-3 {
    padding-top: 60px;
}

.pb-1 {
    padding-bottom: 20px;
}

.pb-2 {
    padding-bottom: 40px;
}

.pb-3 {
    padding-bottom: 60px;
}


/* ==========================================================
   Responsive Container
   ========================================================== */

@media (max-width: 650px) {

    .container {
        padding-inline: 16px;
    }

    .section {
        padding: 64px 0;
    }

    .section-sm {
        padding: 48px 0;
    }

    .section-lg {
        padding: 80px 0;
    }

}