/home/moonrcjl/public_html/wp/wp-content/themes/arsha/assets/scss/components/_section-title.scss
@use '../utils' as *;

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

.mt-section {
    &-subtitle {
        display: inline-block;
        color: var(--mt-common-black-2);
        font-family: var(--mt-ff-body);
        font-size: 20px;
        font-weight: 400;
        line-height: 24px;
        position: relative;
        & i {
            height: 1px;
            width: 33px;
            background: var(--mt-common-black);
            display: inline-block;
            margin-right: 10px;
        }

        & cite {
            height: 1px;
            width: 33px;
            background: var(--mt-common-black);
            display: inline-block;
            margin-right: 10px;


        }

        & i {
            height: 1px;
            width: 19px;
            background: var(--mt-common-black);
            position: absolute;
            left: 13px;
            top: 11px;
        }

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

        & span {
            height: 1px;
            width: 33px;
            background: var(--mt-common-white);
            display: inline-block;
            margin-right: 10px;
            margin-bottom: 5px;
            &.mtwhitebg {
                background: var(--mt-common-black);
            }
        }

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

    }

    &-title {
        color: #000;
        font-size: 72px;
        font-weight: 800;
        // letter-spacing: -1.88px;

        & span {
            color: var(--mt-theme-1);
            font-family: "Lora", serif;
            font-size: 30px;
            font-weight: 700;
            margin-right: 4px;
        }

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

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

            & br {
                display: none;
            }
        }

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

            & br {
                display: none;
            }
        }

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

            & br {
                display: none;
            }
        }

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

    }

    &-content {
        & p {
            & br {
                @media #{$xs} {
                    display: none;
                }
            }

            &.mtwhite {
                color: rgba(255, 255, 255, 0.8);
            }
        }
    }
}