:root {
    --car-card-transition: .5s;
    --car-card-container-border-radius: 15px;
    --car-card-container-gap: 20px;
    --car-card-container-title-fw: 400;
    --car-card-container-title-fs: 40px;
    --car-card-container-title-padding-start: 50px;
    --car-card-cars-grid-template: 1fr 1fr;
    --car-card-cars-height: 500px;

    --car-card-background-overlay-padding: 50px;
    --car-card-background-overlay: linear-gradient(0deg,rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 30%);
    --car-card-background-overlay-top: linear-gradient(180deg,rgba(0,0,0,0.7) 70%,rgba(0,0,0,0) 100%);
    --car-card-background-overlay-title-fw: 600;
    --car-card-background-overlay-title-fs: 28px;
    --car-card-background-overlay-price-fw: 400;
    --car-card-background-overlay-price-fs: 28px;

    --car-card-background-overlay-btn-fs: 24px;
    --car-card-background-overlay-btn-fw: 300;
    --car-card-background-overlay-btn-br: 10px;
    --car-card-background-overlay-btn-padding: 15px 0;
    --car-card-background-overlay-btn-max-width: 200px;
    --car-card-background-free-cars-btn-max-width: 300px;
}

.car_cards__container {
    width: calc(100% - calc(2 * var(--car-card-container-gap)));
    padding: var(--car-card-container-gap) 0;
    margin: 0 var(--car-card-container-gap);
    gap: var(--car-card-container-gap);
    box-sizing: border-box;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    display: flex;
}

.car_cards__container > h2 {
    margin: 0;
    margin-inline-start: var(--car-card-container-title-padding-start);
    font-weight: var(--car-card-container-title-fw);
    font-size: var(--car-card-container-title-fs);
    color: var(--base-text-color);
    text-align: start;
    width: 100%;
}

.car_cards__container > .car_cards__cars {
    grid-template-columns: var(--car-card-cars-grid-template);
    margin-bottom: var(--car-card-container-gap);
    gap: var(--car-card-container-gap);
    display: grid;
    width: 100%;
}

.car_cards__container > .car_cards__cars > .car_cards__car_card {
    border-radius: var(--car-card-container-border-radius);
    transition: var(--car-card-transition);
    height: var(--car-card-cars-height);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    cursor: pointer;
    display: flex;
    width: 100%;
}

.car_cards__container > .car_cards__cars > .car_cards__car_card > .car_cards__car_card_overlay_bottom {
    background: var(--car-card-background-overlay);
    justify-content: center;
    align-items: center;
    position: absolute;
    display: flex;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}

.car_cards__container > .car_cards__cars > .car_cards__car_card > .car_cards__car_card_overlay_hover {
    padding: var(--car-card-background-overlay-padding);
    background: var(--car-card-background-overlay-top);
    transition: var(--car-card-transition);
    justify-content: space-between;
    flex-direction: column;
    box-sizing: border-box;
    align-items: start;
    position: absolute;
    display: flex;
    height: 100%;
    width: 100%;
    opacity: 0;
    left: 0;
    top: 0;
}

.car_cards__container > .car_cards__cars > .car_cards__car_card:hover > .car_cards__car_card_overlay_hover {
    opacity: 1;
}

.car_cards__container > .car_cards__cars > .car_cards__car_card > .car_cards__car_card_overlay_hover > div {
    gap: var(--car-card-container-gap);
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    display: flex;
    width: 100%;
}

.car_cards__container > .car_cards__cars > .car_cards__car_card > .car_cards__car_card_overlay_hover .car_cards__car_card_name {
    font-weight: var(--car-card-background-overlay-title-fw);
    font-size: var(--car-card-background-overlay-title-fs);
    color: var(--base-text-color);
    text-decoration: none;
    margin: 0;
}

.car_cards__container > .car_cards__cars > .car_cards__car_card > .car_cards__car_card_overlay_hover .car_cards__car_card_sumbit,
.car_cards__container > .car_cards__empty_rental_submit {
    min-width: var(--car-card-background-overlay-btn-max-width);
    border-radius: var(--car-card-background-overlay-btn-br);
    padding: var(--car-card-background-overlay-btn-padding);
    font-weight: var(--car-card-background-overlay-btn-fw);
    font-size: var(--car-card-background-overlay-btn-fs);
    background-color: var(--base-accient-color);
    transition: var(--car-card-transition);
    color: var(--base-text-color);
    justify-content: center;
    text-decoration: none;
    flex-direction: row;
    align-items: center;
    display: flex;
}

.car_cards__container > .car_cards__cars > .car_cards__car_card > .car_cards__car_card_overlay_hover .car_cards__car_card_sumbit:hover,
.car_cards__container > .car_cards__empty_rental_submit:hover {
    background-color: var(--base-accient-color-hover);
    scale: 1.01;
}

.car_cards__container > .car_cards__cars > .car_cards__car_card > .car_cards__car_card_overlay_hover .car_cards__car_card_price {
    font-weight: var(--car-card-background-overlay-price-fw);
    font-size: var(--car-card-background-overlay-price-fs);
    color: var(--base-text-color);
    text-decoration: none;
}

.car_cards__container > .car_cards__empty_rental {
    font-size: var(--car-card-background-overlay-title-fs);
    font-weight: var(--car-card-background-overlay-btn-fw);
    padding: var(--car-card-container-gap);
    color: var(--base-text-color);
    white-space: break-spaces;
    text-align: center;
    margin: 0;
}

.car_cards__container > .car_cards__empty_rental_text {
    font-weight: var(--car-card-background-overlay-btn-fw);
    font-size: var(--car-card-background-overlay-btn-fs);
    color: var(--base-text-color);
    white-space: break-spaces;
    text-align: center;
    margin: 0;
}

.car_cards__container > .car_cards__empty_rental_submit {
    min-width: var(--car-card-background-free-cars-btn-max-width);
    margin-bottom: var(--car-card-container-title-padding-start);
}


@media only screen and (max-width: 1200px) {
    :root {
        --car-card-background-overlay-padding: 30px;
        --car-card-container-gap: 15px;
    }
}

@media only screen and (max-width: 1080px) {
    .car_cards__container > .car_cards__cars > .car_cards__car_card > .car_cards__car_card_overlay_hover > div {
        flex-direction: column;
        align-items: end;
    }
}

@media only screen and (max-width: 860px) {
    :root {
        --car-card-cars-grid-template: 1fr;
        --car-card-container-gap: 20px;
        --car-card-background-overlay-padding: 50px;
    }

    .car_cards__container > .car_cards__cars > .car_cards__car_card > .car_cards__car_card_overlay_hover > div {
        justify-content: space-between;
        flex-direction: row;
        align-items: center;
    }
}

@media only screen and (max-width: 640px) {
    :root {
        --car-card-container-gap: 15px;
        --car-card-background-overlay-padding: 20px;
    }
}

@media only screen and (max-width: 560px) {
    :root {
        --car-card-container-title-fs: 30px;
        --car-card-container-title-padding-start: 30px;
        --car-card-background-overlay-title-fs: 24px;
        --car-card-background-overlay-price-fs: 24px;
        --car-card-background-overlay-btn-fs: 18px;
    }

    .car_cards__container > .car_cards__cars > .car_cards__car_card > .car_cards__car_card_overlay_hover {
        align-items: center;
    }

    .car_cards__container > .car_cards__cars > .car_cards__car_card > .car_cards__car_card_overlay_hover > div {
        flex-direction: column;
        align-items: center;
    }

    .car_cards__container > .car_cards__cars > .car_cards__car_card > .car_cards__car_card_overlay_hover .car_cards__car_card_name {
        text-align: center;
    }
}