.bio-what-is {
    .section__title {
        margin-bottom: 1.6rem;
    }
}

.bio-ind__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.4rem;

    @media (width <=991px) {
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
    }
}

.bio-ind__item {
    background-color: var(--background-color-light);
    border-radius: 1.6rem;
    padding: 3.2rem;
    display: flex;
    justify-content: space-between;

    @media (width <=991px) {
        padding: 2.4rem 0 2.4rem 2.4rem;
    }

    @media (width < 640px) {
        padding: 1.6rem 0 1.6rem 1.6rem;
    }
}

.bio-ind__item-image {
    flex-shrink: 0;
}

.bio-ind__item-desc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.2rem;

    @media (639px < width <=991px) {
        gap: .8rem;
        justify-content: flex-start;
    }

    @media (width < 640px) {
        padding-block: 2rem;
        gap: .8rem;
    }

    p {
        margin: 0;
        font-size: 1.8rem;
        line-height: 2.4rem;

        @media (width <=991px) {
            font-size: 1.6rem;
            line-height: 2rem;
        }
    }
}

.bio-ind__item-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 2.8rem;
    font-weight: 500;
    line-height: 3.2rem;

    @media (width <=991px) {
        font-size: 2rem;
        line-height: 2.4rem;
    }
}

.section:has(.bio-how-to__content) .section__title {
    margin-bottom: 4.8rem;

    @media (width < 1200px) {
        margin-bottom: 3.2rem;
    }
}

.bio-how-to__content {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;

    @media (width < 1200px) {
        gap: 1.2rem;
        margin-top: 2.4rem;
    }

    @media (width < 640px) {
        gap: 0.8rem;
    }
}

.bio-how-to__item {
    background-color: var(--color-light);
    border-radius: 1.6rem;
    padding: 3.2rem;

    @media (width < 1200px) {
        padding: .8rem 2rem 1.2rem .8rem;
        display: flex;
        gap: 1.6rem;
    }
}

.bio-how-to__item-icon {
    margin-bottom: 3.2rem;
    width: 7.2rem;
    height: 7.2rem;

    @media (width < 1200px) {
        width: 5.2rem;
        height: 5.2rem;
    }
}

.bio-how-to__item-content {
    &:has(.ui-btn) {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 3.2rem;
        width: 100%;

        @media (width < 1200px) {
            gap: 1.6rem;
        }

        .ui-btn {
            padding: 1.6rem !important;

            @media (width < 1200px) {
                padding: 1.2rem !important;
            }

            @media (width < 640px) {
                align-self: flex-end;
            }

            svg {
                width: 2.4rem;
                height: 2.4rem;
            }
        }
    }
}

.bio-how-to__item-title {
    margin-bottom: 1.2rem;
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.3;

    @media (width <=991px) {
        font-size: 1.6rem;
        margin-bottom: 0.2rem;
    }
}

.bio-how-to__item-text {
    color: var(--color-grey);
    font-size: 1.8rem;
    line-height: 1.3;

    @media (width < 1200px) {
        font-size: 1.4rem;
    }
}

.bio-banner {
    background-color: var(--background-color-light);
    border-radius: 1.6rem;
    padding: 4.8rem;

    @media (width < 1200px) {
        padding: 0;
    }

    .row {
        @media (width < 640px) {
            gap: 2.4rem;
        }
    }

    .section__title {
        margin-bottom: 3.2rem;

        @media (639px < width < 1200px) {
            margin-bottom: 2.4rem;
        }
    }

    .bio-banner__content {

        .ui-wysiwyg ul>li {
            font-size: 1.4rem;
        }

        @media (width < 1200px) {
            padding: 3.2rem;
        }

        @media (width < 640px) {
            padding: 3.2rem 2rem 0 2rem;
        }
    }

    .bio-banner__subtext {
        color: var(--color-grey);
        font-size: 1.2rem;
        line-height: 1.33;
    }

    .bio-banner__image {
        display: flex;
        align-items: center;
        justify-content: center;

        @media (639px < width < 992px) {
            scale: 2;
            transform-origin: right;
        }
    }
}