@import './variables.css';

/* Container */
.container-xl {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.container-xl.g-0 {
    padding: 0;
}

.container-xl.g-0 > .row {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

/* Grid */
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

.col {
    flex: 1 0 0%;
    width: 100%;
    padding: 0;
}

/* Sections */
section {
    padding: var(--section-padding);
}

section.pt-0 {
    padding-top: 0;
}

section.pb-0 {
    padding-bottom: 0;
}

/* Section spacing */
section + section {
    margin-top: 0;
}

section.pb-0 + section.pt-0 {
    padding-top: 80px;
}

section:not(.pb-0) + section.pt-0 {
    padding-top: 0;
}

/* Section Header */
.section-header {
    text-align: center;
    margin-bottom: var(--margin-section-header);
}

.section-header h1 {
    font-size: var(--font-size-h1);
    font-weight: 700;
    line-height: var(--line-height-h1);
    letter-spacing: var(--letter-spacing-h1);
    margin-bottom: var(--gap-lg);
    color: var(--color-text-primary);
}

.section-header h2 {
    font-size: var(--font-size-h2);
    font-weight: 700;
    line-height: var(--line-height-h2);
    letter-spacing: var(--letter-spacing-h2);
    margin-bottom: var(--gap-lg);
    color: var(--color-text-primary);
}

.section-header h3 {
    font-size: var(--font-size-h3);
    font-weight: 700;
    line-height: var(--line-height-h3);
    margin-bottom: 0;
    color: var(--color-text-primary);
}

.section-header p {
    font-size: var(--font-size-body-large);
    font-weight: 400;
    line-height: var(--line-height-body-large);
    letter-spacing: var(--letter-spacing-body);
    margin-bottom: 0;
    color: var(--color-text-secondary);
}