.tools {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(22.6%, #f4e6cb), color-stop(46.88%, #d9f5cf), color-stop(71.15%, #f6d9f0), to(#ffffff));
    background-image: linear-gradient(180deg, #ffffff 0%, #f4e6cb 22.6%, #d9f5cf 46.88%, #f6d9f0 71.15%, #ffffff 100%);
}

.tools__content-wrapper {
    overflow: hidden;
}

.tools__content {
    position: relative;
    z-index: 1;
    padding-block: 68rem 92rem;
}

.tools__items {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

.tools__item {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background: rgba(255, 255, 255, 0.6);
    border: 1rem solid #f8efde;
    border-radius: 12rem;
    aspect-ratio: 1/1;
}

.tools__item img {
    width: 42%;
    height: auto;
}

.tools__item--1 {
    top: 1%;
    left: 20%;
    width: 60rem;
}

.tools__item--2 {
    top: 12%;
    left: -14%;
    width: 60rem;
}

.tools__item--3 {
    top: 45%;
    left: -4%;
    width: 49rem;
}

.tools__item--4 {
    bottom: 1%;
    left: 0%;
    width: 44rem;
}

.tools__item--5 {
    right: -5%;
    bottom: 1%;
    width: 53rem;
}

.tools__item--6 {
    top: 45%;
    right: -14%;
    width: 65rem;
}

.tools__item--7 {
    top: 12%;
    right: -16%;
    width: 64rem;
}

.tools__item--8 {
    display: none;
}

.tools__item--9 {
    top: 2%;
    right: 6%;
    width: 72rem;
}

.tools__top-text {
    margin-bottom: 16rem;
    color: var(--color-gray-700);
    text-align: center;
}

.tools__title {
    margin-bottom: 48rem;
    font-size: 48rem;
    font-weight: 500;
    line-height: 52rem;
    text-align: center;
}

.tools__tags {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 12rem;
    -webkit-margin-after: 24rem;
            margin-block-end: 24rem;
}

.tools__tag-link {
    display: block;
    padding-inline: 19rem;
    padding-block: 14rem;
    font-size: 18rem;
    line-height: 22rem;
    border: 1rem solid rgba(0, 0, 0, 0.6);
    border-radius: 8rem;
    -webkit-transition:
        background-color var(--global-transition-duration),
        border-color var(--global-transition-duration),
        color var(--global-transition-duration);
    transition:
        background-color var(--global-transition-duration),
        border-color var(--global-transition-duration),
        color var(--global-transition-duration);
}

.tools__link {
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 12rem;
    font-size: 18rem;
    line-height: 22rem;
    margin-inline: auto;
    padding-inline: 20rem;
    padding-block: 15rem;
}

.tools__link:after {
    content: '';
    width: 17rem;
    min-width: 17rem;
    height: 14rem;
    background: url('../../img/icons/arrow-left.svg') center/contain no-repeat;
    -webkit-transition: -webkit-transform var(--global-transition-duration);
    transition: -webkit-transform var(--global-transition-duration);
    transition: transform var(--global-transition-duration);
    transition: transform var(--global-transition-duration), -webkit-transform var(--global-transition-duration);
}

.tools__banners {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.tools__banner {
    position: sticky;
    top: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-inline: 24rem;
    padding-block: 120rem;
}

.tools__banner--1 {
    z-index: 1;
}

.tools__banner--2 {
    z-index: 2;
}

.tools__banner--3 {
    z-index: 3;
}

.tools__banner--4 {
    z-index: 4;
}

.tools__banner-image {
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 24rem 24rem 0 0;
}

.tools__banner-image img {
    width: 100%;
    height: auto;
}

.tools__banner-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding-inline: 24rem;
    padding-block: 24rem;
    background-color: var(--color-white);
    border-radius: 0 0 24rem 24rem;
}

.tools__banner-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.tools__banner-title {
    -webkit-margin-after: 24rem;
            margin-block-end: 24rem;
    font-size: 24rem;
    font-weight: 500;
    line-height: 1;
}

.tools__banner-text {
    -webkit-margin-after: 24rem;
            margin-block-end: 24rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--color-gray-700);
    font-size: 16rem;
    line-height: 1;
}

.tools__banner-text p:has(+ p) {
    -webkit-margin-after: 16rem;
            margin-block-end: 16rem;
}

.tools__banner-link {
    margin-inline: 0 auto;
    padding-inline: 0;
}

@media screen and (min-width: 768px) {
    .tools__content {
        padding-block: 120rem;
    }

    .tools__tags {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

    .tools__banner-content {
        padding-inline: 40rem;
        padding-block: 40rem;
    }

    .tools__banner-title {
        font-size: 32rem;
    }

    .tools__banner-text {
        -webkit-line-clamp: unset;
        font-size: 18rem;
    }
}

@media screen and (min-width: 1024px) and (orientation: landscape) {
    .tools__container {
        padding-inline: 24rem;
    }

    .tools__content {
        padding-block: 240rem;
    }

    .tools__item--1 {
        top: 16%;
        left: 20%;
        width: 76rem;
    }

    .tools__item--2 {
        top: 36%;
        left: 5%;
        width: 112rem;
    }

    .tools__item--3 {
        top: 62%;
        left: 2%;
        width: 51rem;
    }

    .tools__item--4 {
        top: 72%;
        bottom: unset;
        left: 16%;
        width: 76rem;
    }

    .tools__item--5 {
        top: 80%;
        right: unset;
        bottom: unset;
        left: 38%;
        width: 53rem;
    }

    .tools__item--6 {
        top: 74%;
        right: 28%;
        width: 74rem;
    }

    .tools__item--7 {
        top: 76%;
        right: 16%;
        width: 63rem;
    }

    .tools__item--8 {
        top: 36%;
        right: 5%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 113rem;
    }

    .tools__item--9 {
        top: 16%;
        right: 32%;
        width: 80rem;
    }

    .tools__title {
        max-width: 790rem;
        margin-inline: auto;
        font-size: 80rem;
        line-height: 88rem;
    }

    .tools__banner {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
                flex-direction: row-reverse;
        -webkit-box-align: unset;
            -ms-flex-align: unset;
                align-items: unset;
        max-height: 880rem;
    }

    .tools__banner-image {
        width: 50%;
        height: 100%;
        border-radius: 24rem 0 0 24rem;
    }

    .tools__banner-content {
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        width: 50%;
        min-height: 100%;
        padding-inline: 48rem;
        padding-block: 56rem;
        border-radius: 0 24rem 24rem 0;
    }

    .tools__banner-title {
        font-size: 48rem;
    }

    .tools__banner-text {
        font-size: 20rem;
    }
}

@media (hover: hover) {
    .tools__tag-link:hover {
        background-color: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--color-white);
    }

    .tools__link:hover:after {
        -webkit-transform: translateX(-4rem);
            -ms-transform: translateX(-4rem);
                transform: translateX(-4rem);
    }
}

@media (hover: none) {
    .tools__tag-link:focus {
        background-color: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--color-white);
    }

    .tools__link:focus:after {
        -webkit-transform: translateX(-4rem);
            -ms-transform: translateX(-4rem);
                transform: translateX(-4rem);
    }
}