@charset "UTF-8";


.container {
    margin: 0 auto;
    padding-inline: 1rem;

    @media screen and (min-width: 544px) {
        max-width: 500px;
    }
    @media screen and (min-width: 768px) {
        max-width: 678px;
    }
    @media screen and (min-width: 992px) {
        max-width: 870px;
    }
    @media screen and (min-width: 1200px) {
        max-width: 1078px;
    }
    @media screen and (min-width: 1400px) {
        max-width: 1262px;
    }
}

.row {
    display: flex;
    flex-flow: row wrap;
    margin: 0 -1rem;
    justify-content: center;

    @media screen and (min-width: 768px) {
        &:not(.row-header) {
            padding-inline: 1rem;
        }
    }

    .col {
        padding: 1rem;
        flex: 0 0 100%;

        @media screen and (min-width: 768px) {
            &.col-25 {
                flex: 0 0 50%;
            }
            &.col-30 {
                flex: 0 0 30%;
            }
            &.col-32 {
                flex: 0 0 32%;
            }
            &.col-33 {
                flex: 0 0 33.33333%;
            }
            &.col-38 {
                flex: 0 0 38%;
            }
            &.col-50 {
                flex: 0 0 50%;
            }
        }

        @media screen and (min-width: 992px) {
            &.col-40 {
                flex: 0 0 40%;
            }
            &.col-70 {
                flex: 0 0 70%;
            }
        }

        @media screen and (min-width: 1200px) {
            &.col-25 {
                flex: 0 0 25%;
            }
        }
    }

    &.row-content {
        padding-block: 3rem;
    }

    &.background-gray {
        background: rgb(from var(--brand-gray-color) r g b / 0.075);
    }

    &.row-footer {
        padding-top: 1.5rem;
        padding-bottom: 1rem;
    }
}