@layer variations {
    .section--hero {
        position: relative;

        height: 100svh;

        background: url(./assets/img/hero-image.webp) bottom left -53vh/180vh no-repeat;
        color: var(--white);

            &::after {
                content: '';

                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                z-index: 1;

                height: 100%;

                background-image: linear-gradient(173.39deg, #141414 5.36%, rgba(0, 0, 0, 0) 95.01%);
            }
            & * {
                z-index: 2;
            }
    }
    .heading--hero {
        font-size: clamp(2.25rem, 1.739rem + 2.045vw, 3.375rem);
        line-height: .8em;
    }
    .hero-text_list {
        padding: 25px 30px;
    }
    .hero-text_button {
        padding: 15px 30px;
        
    }
}
.hero-content {height: 100%;}
.hero-text_list{
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
}
.hero-text_item {
    width: fit-content;
    padding: 10px 25px;

    border-radius: 80px;
    color: var(--black);
    background-color: var(--white);
    text-transform: uppercase;

    &:nth-child(2) {
        align-self: center;
    }
    &:last-child {
        align-self: end;
    }
}




.stats-content {
    gap: clamp(1.25rem, -1.79rem + 12.16vw, 7.938rem);
}
.stats-list {gap: 30px}
.stats-list_item {
    color: var(--red);
    font-size: clamp(1rem, 0.943rem + 0.227vw, 1.125rem);
    text-align: right;

    & > div {
      font-size: clamp(4rem, 3.148rem + 3.409vw, 5.875rem);
      font-weight: 600;
      text-align: left;
      white-space: nowrap;
    }
}
.stats-image {
    max-height: 212px;
    border-radius: 20px;
}

@layer variations {
    .section--portfolio {
        padding-top: 60px;
    }
}


@media (max-width: 992px) {
    @layer variations {
        .hero-text > .container {
            padding: 0;
        }
    }
}
@media (min-width: 992px) {
    .section--hero {
        background-position: bottom center;
        background-size: cover;
    }
    .heading--hero{margin-bottom: 43px; text-transform: uppercase;}
    .hero-text {background-color: var(--dark-gray);}
    .hero-text_list, .hero-text_item {flex: 1;}
    .hero-text_list {
        position: relative;
        z-index: 3;
        padding-left: 0;
    }
    .hero-text_button {
        position: relative;
        padding-right: 0;
        &::before, &::after {
            content: '';

            position: absolute;
            top: 50%;

        }
        &::before {
            right: calc(100% - 30px);
            width: 100px;
            height: 1px;
        }
        &::after {
            right: calc(100% - 32px);

            width: 5px;
            height: 5px;
            margin-top: -2px;

            border-radius: 50%;
        }
    }
    .hero-text_item{text-align: center;}
    @layer variations {
        .hero-text_button {
            width: 100%;
            max-width: 257px;
        }

        .section--advantages {
            padding: 95px 0 0 0; 
        }
        .section--services {
            padding: 120px 0 110px; 
        }
        .section--portfolio {
            padding: 130px 0 60px;
        }
    }


    .stats-list-wrap {
        order: 1;
    }
    .stats-list {
        gap: 20px 60px;
        grid-template-columns: 1fr 1fr;
    }
    .stats-image {max-height: 474px}

    .slider_image-slider{
        padding-bottom: 35px;
    }
    .portfolio-slide_info {
        flex: 1 0 413px;
    }
    .portfolio-slide_image {
        height: 632px;
        max-height: none;
    }
    .portfolio-slider_nav {
        position: absolute;
        z-index: 2;
        bottom: 20px;
        left: 0;
        width: calc(50% - clamp(1.875rem, -0.909rem + 11.136vw, 8rem));
    }
    @layer variations {
        .portfolio-slider_dots {
            right: 0;
            bottom: 0;

            margin: 0;

            text-align: center;
        }
    }

    .reviews-slider-wrap {
        max-width: 413px;
    }
}
@media(min-width: 1980px) {
    .section--hero {
        background-position: center 70%;
    }
}