@use "components/common/_variables.scss";

.cards-text {
    background: variables.$color-smooth;
    padding: 100px 0;
    &__content {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }
    &__info {
        width: 400px;
        p {
            line-height: 1.5;
        }
        a {
            color: variables.$color-alt;
            &:hover {
                text-decoration: none;
            }
        }
    }
    &__title {
        margin-top: 0px;
        margin-bottom: variables.$spacing-l;
    }
    &__cards {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .cards-item {
            width: 400px;
            box-sizing: border-box;
            &:nth-child(2n+1) {
                margin-right: 100px;
            }
            &:nth-child(2n) {
                margin-left: 100px;
            }
            &:not(:last-child) {
                margin-bottom: 50px;
            }
        }
    }
}

.cards-item {
    padding: 30px;
    &__title {
        margin-top: 0px !important;
        margin-bottom: variables.$spacing-m;
        color: variables.$color-alt;
        a {
            color: variables.$color-alt;
            text-decoration: none;
        }
    }

    &__title-text {
        color: variables.$color-main;
    }

    &_smooth {
        background: variables.$color-inverse;
    }
}

.cards-blocks {
    margin: variables.$spacing-l*2 0;
    &__content {
        box-sizing: border-box;
    }
    &__title {
        margin-top: 0px;
        margin-bottom: variables.$spacing-l;
    }
    &__cards {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
        flex-wrap: wrap;
    }
    .cards-item {
        width: 45%;
        box-sizing: border-box;
        margin-bottom: variables.$spacing-l*2;
        border: 1px solid #ddd;

        @media (min-width: variables.$container-breakpoint-lg) {
            width: 30%;
        }
        // kostyl

        p {
            font-size: variables.$font-size-base;
        }
    }
}
