:root {
    --reviews-grid-templates-column: repeat(3, 1fr);
    --reviews-gap: 30px;
    --reviews-title-fs: 30px;
    --reviews-title-fw: 400;
    --reviews-rate-fw: 600;
    --reviews-rate-fs: 36px;
    --reviews-date-fs: 14px;
    --reviews-date-fw: 300;
    --reviews-text-fs: 20px;
    --reviews-text-fw: 300;
}

.reviews_cards__container {
    grid-template-columns: var(--reviews-grid-templates-column);
    margin: 0 auto var(--reviews-gap);
    padding: var(--padding-body);
    grid-auto-flow: row dense;
    gap: var(--reviews-gap);
    align-items: start;
    display: grid;
}

.reviews_cards__container > .review__card {
    background-color: var(--light-text-color);
    padding: calc(var(--reviews-gap) / 2);
    border-radius: var(--br);
    box-sizing: border-box;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    display: flex;
    width: 100%;
}

.reviews_cards__container > .review__card.wide {
    grid-column: span 2;
}

.reviews_cards__container > .review__card > .review__card__header {
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: end;
    display: flex;
    width: 100%;
}

.reviews_cards__container > .review__card > .review__card__header > .review__card__title {
    font-weight: var(--reviews-title-fw);
    font-size: var(--reviews-title-fs);
    color: var(--hover-color);
}

.reviews_cards__container > .review__card > .review__card__header > .review__card__rate {
    font-weight: var(--reviews-rate-fw);
    font-size: var(--reviews-rate-fs);
    color: var(--hover-color);
}

.reviews_cards__container > .review__card > .review__card__date {
    font-weight: var(--reviews-date-fw);
    font-size: var(--reviews-date-fs);
    margin-bottom: var(--reviews-gap);
    color: var(--footer-bg);
    width: 100%;
}

.reviews_cards__container > .review__card > .review__card__text {
    font-weight: var(--reviews-text-fw);
    font-size: var(--reviews-text-fs);
    white-space: break-spaces;
    color: var(--footer-bg);
    width: 100%;
    margin: 0;
}

@media only screen and (max-width: 1240px) {
    :root {
        --reviews-grid-templates-column: repeat(2, 1fr);
        --reviews-gap: 20px;
    }
}

@media only screen and (max-width: 680px) {
    :root {
        --reviews-grid-templates-column: repeat(1, 1fr);
        --reviews-gap: 15px;
    }

    .reviews_cards__container > .review__card {
        padding: var(--reviews-gap);
    }

    .reviews_cards__container > .review__card.wide {
        grid-column: span 1;
    }
}