.content-box {

    padding-top: clamp(20px, 4vw, 40px);
    padding-bottom: clamp(40px, 8vw, 80px);

    &--gray{
        background: var(--colors-grey-light-1);
    }

    &--g-light{
        background: var(--colors-grey-light-2);
    }

    &__wrap {
        display: grid;
        align-content: center;
        gap: clamp(20px, 4vw, 40px);
    }

    p {
        padding: 10px 0;
        font-family: var(--font-family);
        font-weight: 400;
        font-size: clamp(16px, 2.4vw, 20px);
        line-height: 140%;
        letter-spacing: 0.01em;
        color: var(--colors-default);
    }

}

.section-content {
    display: flex;
    gap: clamp(20px, 5.333vw, 60px);

    &--bigimg{
        .section-content__image-v2{
            width: 100%;
            img{
                width: 100%;
            }
        }

        .section-content__content{
            min-width: 560px;
            max-width: 560px;

            @include desktop {
                min-width: 440px;
                max-width: 440px;
            }

            @include tablet{
                min-width: 100%;
                max-width: 100%;
            }
        }
    }

    &--bigimg-v2{
        .section-content__image-v2{
            width: 100%;
            img{
                width: 100%;
            }
        }

        .title_02,p{
            color: #fff;
        }

        .title_02{
            font-size: clamp(24px, 4vw, 36px);
        }
        p{
            font-size: clamp(18px, 2.8vw, 24px);
        }

        .section-content__content{
            min-width: 540px;
            max-width: 540px;

            @include desktop {
                min-width: 440px;
                max-width: 440px;
            }

            @include tablet{
                min-width: 100%;
                max-width: 100%;
            }
        }
    }

    &__content {
        display: grid;
        align-content: center;
        gap: clamp(10px, 2vw, 20px);
        
    }

    &__image {
        min-width: 580px;
        max-width: 580px;

        img {
            width: 100%;
        }
    }


    @include desktop {
        &__image{
            min-width: 440px;
            max-width: 440px;
        }
    }

    @include tablet{
        flex-direction: column;
        &__image{
            min-width: 100%;
            max-width: 100%;
        }

        &--reverse{
            flex-direction: column-reverse;
        }
    }
}

.title_02 {
    padding: 10px 0;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: clamp(24px, 4.267vw, 40px);
    line-height: 100%;
    letter-spacing: 0.01em;
    color: var(--colors-default);

    a{
        color: var(--colors-default);
        transition: 0.23s;
        &:hover{
            color: var(--colors-primary);
        }
    }

}

.text-sm{
    padding: 10px 0;
    h6{
        font-family: var(--font-family);
        font-weight: 700;
        font-size: clamp(20px, 2.933vw, 24px);
        line-height: 140%;
        letter-spacing: 0.01em;
        color: var(--colors-default);
    }
    p{
        padding: 0;
    }
}

.ul-regular {
    list-style-type: disc;
    padding-left: 30px;

    li {
        font-family: var(--font-family);
        font-weight: 400;
        font-size: 20px;
        line-height: 140%;
        letter-spacing: 0.01em;
        color: var(--colors-default);
    }

    p {
        padding: 0;
    }
}

.ul-checkmark {
    padding-left: 36px;
    display: grid;
    gap: 20px;

    li {
        font-family: var(--font-family);
        font-weight: 400;
        font-size: 20px;
        line-height: 120%;
        color: var(--colors-default);
        position: relative;

        &::before {
            display: block;
            content: '';
            position: absolute;
            border-radius: 100px;
            width: 28px;
            height: 28px;
            background: var(--colors-primary2);

            background-image: url(/img/icons/checked.svg);
            background-position: center;
            background-size: 11px;
            background-repeat: no-repeat;
            left: -36px;
            top: 0;
        }
    }

    p {
        padding: 0;
    }
}


.ul-num {
    list-style: none;
    counter-reset: list-counter;
    padding-left: 0;
    display: grid;
    gap: 20px;

    li{
        counter-increment: list-counter;
        position: relative;
        padding-left: 36px;

        &::before {
            content: counter(list-counter) "";
            position: absolute;
            font-family: var(--font3);
            font-weight: 500;
            font-size: 13px;
            line-height: 154%;
            color: var(--colors-white);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 100px;
            width: 28px;
            height: 28px;
            background: var(--colors-primary2);
            left: 0px;
            top: 0px;
        }
    }

    p{
        padding: 0px;
    }
}

