/* title-section */

.title-section {
    margin: var(--default-section-margin) 0;
}

.title-section.-smaller-margin {
    margin: var(--smaller-section-margin) 0;
}

.title-section__wrapper {
    display: flex;
    flex-direction: column;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.title-section .tag {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: min(8px, 0.556vw);
    height: min(32px, 2.222vw);
    width: fit-content;
    padding: min(3px, 0.208vw) min(16px, 1.111vw) 0 min(16px, 1.111vw);
    border-radius: min(100px, 6.944vw);
    border: 1px solid var(--shark-shark-100, #E4E7E9);
    line-height: 100% !important;
    margin: 0 auto;
}


.title-section .tag + .title {
    margin-top: min(40px, 2.778vw);
}

.title-section .subtitle {
    width: min(580px, 40.278vw);
    margin: 0 0 0 auto;
}
.title-section .subtitle.-center{
    margin-left: auto;
    margin-right: auto;
}

.title-section .subtitle {
    margin-top: min(80px, 5.556vw);
}

.title-section .title {
    line-height: 128%;
}

.title-section .title img {
    position: relative;
    vertical-align: top;
    width: min(72px, 5vw);
    margin-top: max(-8px, -0.556vw);
    transform: translate(min(1px, 0.069vw), min(3px, 0.208vw));
}

.title-section .title .square {
    margin: 0 min(2px, 0.139vw) 0 min(6px, 0.417vw);
    vertical-align: middle;
}

.small-title-section .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.small-title-section * {
    text-align: center;
}

.small-title-section .subtitle {
    margin: min(16px, 1.111vw) auto 0 auto;
    max-width: min(600px, 41.667vw);
    color: var(--shark-shark-300, #8C8F90);
}

.title-section__wrapper .section-title.-left{
    text-align: start;
    margin-left: 0;
    margin-right: auto;
}

.title-section__wrapper .subtitle.-right{
    text-align: start;
    margin-left: auto;
    margin-right: 0;
}


@media screen and (max-width: 1100px) {

    /* title-section */
    .title-section .tag {
        gap: 4px;
        height: 28px;
        padding: 3px 12px 0 12px;
        border-radius: 100px;
    }


    .title-section .tag + .title {
        margin-top: 18px;
    }

    .title-section .subtitle {
        width: 100%;
        margin: 0 0 0 auto;
    }

    .title-section .subtitle {
        margin-top: 24px;
    }

    .title-section .title {
        line-height: 166%;
    }

    .title-section .title img {
        position: relative;
        vertical-align: top;
        margin: -8px 2px 0 0;
        transform: translate(0, 2px);
        width: 48px;
        aspect-ratio: 1/1;
    }

    .title-section .title .square {
        margin: 0 0 0 4px;
        width: 48px;
        aspect-ratio: 1/1;
        vertical-align: top;
        display: inline;
    }

    .small-title-section .subtitle {
        margin-top: 16px;
        max-width: 600px;
    }
}