/home/moonrcjl/template.moontelict.com/attorix/assets/scss/components/_section-title.scss
@use '../utils' as *;

/*----------------------------------------*/
/*  2.15 Section Title
/*----------------------------------------*/

.mt-section {
    &-subtitle {
        color: var(--mt-theme-1);
        font-size: 24px;
        font-weight: 600;
        display: inline-block;
        position: relative;
        z-index: 2;

        @media #{$md,$xs} {
            font-size: 18px;
        }

        & cite {
            margin-right: 4px;
        }

        &.mtblack {
            color: var(--mt-common-black);
        }

        &.mtwhite {
            color: var(--mt-common-white);
        }

    }

    &-title {
        color: var(--mt-common-black-2);
        font-size: 52px;
        font-weight: 600;
        line-height: 1;
        z-index: 2;
        position: relative;

        @media #{$xxl,$xl} {
            font-size: 38px;
        }

        @media #{$lg} {
            font-size: 35px;

            & br {
                display: none;
            }
        }

        @media #{$md} {
            font-size: 32px;

            & br {
                display: none;
            }
        }

        @media #{$xs} {
            font-size: 25px;

            & br {
                display: none;
            }
        }

        &.mtlarge {
            font-size: 200px;

            @media #{$md,$xs} {
                font-size: 45px;

                & br {
                    display: none;
                }
            }
        }

        &.mtblack {
            color: var(--mt-common-black);
        }

        &.mtwhite {
            color: var(--mt-common-white);
        }


    }

    &-content {
        & p {
            @media #{$md,$xs} {

                & br {
                    display: none;
                }
            }

            &.mtstyletwo {
                font-size: 24px;
                line-height: 34px;
                display: flex;
                align-items: center;

                @media #{$lg, $md,$xs} {

                    & br {
                        display: none;
                    }
                }

                @media #{$xs} {
                    flex-wrap: wrap;
                }

                & span {
                    display: block;

                    @media #{$lg} {
                        margin-right: 40px;
                    }

                    @media #{$xs} {
                        margin-bottom: 30px;
                    }
                }
            }
        }
    }
}