/* Method. */

.method {
    position: relative;

    padding-block: var(--section-gap);
    background-color:var(--main);
}

.method .container {
    position: relative;
    z-index: 1;
}

.method-dec {
    position: absolute;
    top: 0;
    right: 0;

    max-width: 1140px;
    background-color: var(--main);
}


.method-top {

}

.method-top .label {
    flex-shrink: 0;
}

.method-top .title {
    max-width: min(996px, 60vw);
}

.method-head:not(:first-child) {
    margin-top: calc(var(--section-gap) * 2);
}

.method-head {
    display: flex;
    flex-direction: column;
    grid-gap: var(--i4);
}

.method-bubbles {
    --imposition: 32px;

    counter-reset: count;

    display: flex;
    position: relative;

    padding-block: var(--i2) var(--section-gap);
    z-index: 1;
}

.method-bubbles:before {
    content: '';
    position: absolute;
    top: -138px;
    left: 50%;
    bottom: -60px;

    aspect-ratio: 1/1;
    border: 1px dashed currentColor;
    opacity: .2;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    z-index: -1;

    -webkit-transform: translate3d(-50%, 0, 0);
    -moz-transform: translate3d(-50%, 0, 0);
    -ms-transform: translate3d(-50%, 0, 0);
    -o-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
}

.method-bubble {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-shrink: 0;
    grid-gap: var(--i4);

    width: calc(100% / 3 + var(--imposition));
    aspect-ratio: 1/1;
    border: 1px solid currentColor;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.method-bubble:before {
    counter-increment: count;
    content: '(0' counter(count) ')';

    font-size: var(--small);
    font-weight: 100;
}

.method-bubble:nth-child(2) {
    margin-inline: calc(var(--imposition) * -1.5);
}

/* Method. */

@media only screen and (max-width: 767px){
    .method-top {
        flex-direction: column;
    }
    .method-top .title {
        max-width: none;
    }
    .method-bubbles {
        flex-direction: column;
    }

    .method-bubble {
        width: 100%;
        max-width: 340px;
        margin-inline: auto !important;
    }

    .method-bubble:nth-child(2) {
        margin-block: calc(var(--imposition) * -1.5);
    }

    .method-bubbles:before {
        top: 132px;
        bottom: 132px;
    }
}