.clear-steps {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 24rem;
}

.clear-steps__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 12rem;
    text-align: center;
}

.clear-steps__text {
    font-size: 16rem;
}

.clear-steps__button {
    margin: 0 auto;
}

.clear-steps__cards {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 12rem;
}

.clear-steps__card {
    line-height: 1.3;
    background-color: var(--color-teal-100);
    border-radius: 24rem;
    -webkit-transition: background-color var(--global-transition-duration) ease-in-out;
    transition: background-color var(--global-transition-duration) ease-in-out;
}

.clear-steps__card:hover {
    background-color: var(--color-primary);
}

.clear-steps__card:hover .clear-steps__card-title,
.clear-steps__card:hover .clear-steps__card-text {
    color: var(--color-white);
}

.clear-steps__card:hover .clear-steps__card-image {
    height: 167rem;
}

.clear-steps__card-image {
    width: 100%;
    height: 0;
    border-radius: 0 0 24rem 24rem;
    -webkit-transition: height var(--global-transition-duration) ease-in-out;
    transition: height var(--global-transition-duration) ease-in-out;
    pointer-events: none;
    -o-object-fit: cover;
       object-fit: cover;
}

.clear-steps__card-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: 36rem 16rem;
}

.clear-steps__card-step {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-bottom: 12rem;
    padding: 4rem 12rem;
    color: var(--color-primary);
    font-size: 14rem;
    font-weight: 500;
    background-color: var(--color-white);
    border-radius: 32rem;
}

.clear-steps__card-title {
    font-size: 24rem;
    font-weight: 700;
    -webkit-transition: color var(--global-transition-duration) ease-in-out;
    transition: color var(--global-transition-duration) ease-in-out;
}

.clear-steps__card-title:has(+ .clear-steps__card-text) {
    margin-bottom: 12rem;
}

.clear-steps__card-text {
    -webkit-transition: color var(--global-transition-duration) ease-in-out;
    transition: color var(--global-transition-duration) ease-in-out;
}

@media screen and (min-width: 768px) {
    .clear-steps__card:hover .clear-steps__card-image {
        height: 210rem;
    }
}

@media screen and (min-width: 1024px) and (orientation: landscape) {
    .clear-steps {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }

    .clear-steps__content {
        -webkit-box-flex: 0;
            -ms-flex: 0 1 34%;
                flex: 0 1 34%;
        text-align: left;
    }

    .clear-steps__button {
        margin: 0;
    }

    .clear-steps__cards {
        -webkit-box-flex: 0;
            -ms-flex: 0 1 50%;
                flex: 0 1 50%;
    }

    .clear-steps__card:hover .clear-steps__card-image {
        height: 260rem;
    }

    .clear-steps__card-step {
        margin-bottom: 16rem;
    }

    .clear-steps__card-title:has(+ .clear-steps__card-text) {
        margin-bottom: 8rem;
    }
}