/* Заголовок с «подогнутым» углом */
.text-cornering{
    /* Тюнингуемые переменные */
    --corner: 30px;                 /* радиус загиба и размер шейпа */
    --pad-x: 20px;                  /* горизонтальный внутренний отступ */
    --pad-b: 14px;                  /* нижний внутренний отступ */
    --shape: url("../images/shape.svg");
    --bg: #fff;

    font-weight: 700;
    font-size: clamp(24px, 4vw, 42px);
    line-height: 1.2;
    text-transform: uppercase;
    margin: 0;
}

.text-cornering .corner{
    display: inline-block;
    background: var(--bg);
    padding: 0 var(--pad-x) var(--pad-b) 0;
    border-radius: 0 0 var(--corner) 0;
    position: relative;
    float: left;
    clear: left;
}

.corner.one-line {
    max-width: 60%;
}

/* Общие стили для псевдоэлементов */
.text-cornering .corner::before,
.text-cornering .corner::after{
    content: "";
    position: absolute;
    width: var(--corner);
    height: var(--corner);
    background: center / cover no-repeat var(--shape);
    transform: rotate(180deg);
}

/* Левый нижний «загиб» */
.text-cornering .corner::before{
    bottom: calc(var(--corner) * -1);
    left: 0;
}

/* Правый верхний «загиб» */
.text-cornering .corner::after{
    top: 0;
    right: calc(var(--corner) * -1);
}

.left-bottom-corner {
    --corner: 30px;
    --pad-x: 20px;
    --pad-b: 14px;
    --shape: url(../images/shape.svg);
    --bg: #fff;
    display: inline-block;
    background: white;
    position: relative;
    /* min-height: 60px; */
    width: auto;
    top: -80px;
    z-index: 2;
    border-radius: 0 30px 0 0;
}

.left-bottom-corner:before, .left-bottom-corner:after  {
    content: "";
    position: absolute;
    width: var(--corner);
    height: var(--corner);
    background: center / cover no-repeat var(--shape);
    transform: rotate(
            90deg);
}

.left-bottom-corner:before {
    top: calc(var(--corner) * -1);
    left: 0;
    transform: rotate(90deg);
}


.left-bottom-corner:after {
    right: calc(var(--corner) * -1);
    bottom: 0;
    /* left: 0; */
}



.right-bottom-corner {
    --corner: 30px;                 /* радиус загиба и размер шейпа */
    --pad-x: 20px;                  /* горизонтальный внутренний отступ */
    --pad-b: 14px;                  /* нижний внутренний отступ */
    --shape: url("../images/shape.svg");
    --bg: #fff;

    display: inline-block;
    background: white;
    position: absolute;
    /* min-height: 60px; */
    width: auto;
    bottom: 0;
    right: 0;
    z-index: 2;
    border-radius: 30px 0 0 0;
    padding: 20px
}

.right-bottom-corner:before, .right-bottom-corner:after  {
    content: "";
    position: absolute;
    width: var(--corner);
    height: var(--corner);
    background: center / cover no-repeat var(--shape);
    transform: rotate(
            360deg);
}


.right-bottom-corner:before {
    left: calc(var(--corner) * -1);
    bottom: 0;
    transform: rotate(360deg);
}


.right-bottom-corner:after {
    top: calc(var(--corner) * -1);
    right: 0;
    /* left: 0; */
}



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

    .text-cornering {
        --corner: 20px;
    }


    .corner.one-line {
        max-width: 90%;
    }

    .right-bottom-corner {
        bottom: calc(50% - 30px);
        border-radius: 30px 0 0 30px;
        padding: 10px;

    }

    .right-bottom-corner:before {
        bottom: calc(var(--corner) * -1);
        right: 0;
        transform: rotate(270deg);
        left: unset;
    }

    .hero__inner.hero__contacts {
        border-radius: 40px !important;
    }

    .left-bottom-corner {
        top: -50px;
    }
}

@media screen and (max-width: 778px) {
        .left-bottom-corner {
            background: none;
            display: block;
            margin: auto;
        }

    .left-bottom-corner:before, .left-bottom-corner:after {
        display: none;
    }

    .hero__inner.hero__contacts {
        border-radius: 0 20px 40px 40px !important;
    }
}

@media screen and (max-width: 445px) {
    .text-cornering {
        font-size: clamp(1px, 5vw, 42px);
    }


    .text-cornering{
        /* Тюнингуемые переменные */
        --corner: 10px;                 /* радиус загиба и размер шейпа */
        --pad-x: 20px;                  /* горизонтальный внутренний отступ */
        --pad-b: 8px;                  /* нижний внутренний отступ */
        --shape: url("../images/shape.svg");
        --bg: #fff;

        font-weight: 700;
        font-size: clamp(16px, 4vw, 42px);
        line-height: 1.2;
        text-transform: uppercase;
        margin: 0;
    }
}