.car{box-shadow:.25rem .25rem .5rem #00000030;border-radius:.25rem;display:grid;grid-template-areas:"image image" "name name" "summary summary" "price rent";grid-template-rows:1fr auto auto auto;grid-template-columns:1fr auto;overflow:hidden;padding-bottom:.5rem;text-decoration:none}.car_image{grid-area:image;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center}.car_name{grid-area:name;font-size:1.5rem;font-weight:700;padding:.5rem 1rem}.car_summary{grid-area:summary;font-size:1rem;padding:.5rem 1rem;color:var(--color-text-secondary)}.car_price{grid-area:price;font-size:1.25rem;font-weight:700;padding:.5rem 1rem}.car_price_value{font-size:1.5rem;color:var(--color-primary)}.car_rent{box-shadow:.25rem .25rem .5rem #00000030;display:inline-flex;justify-content:center;align-items:center;padding:.5rem 1rem;border-radius:.25rem;text-align:center;font-weight:700;font-size:1.25em;cursor:pointer;transition:opacity .5s,box-shadow .3s,transform .3s;background-color:var(--color-primary);color:var(--color-primary-over);border:1px solid var(--color-border)}.car_rent:not(:disabled):hover{box-shadow:.5rem .5rem .5rem #00000030;transform:scale(1.1)}.car_rent:disabled{opacity:.2;cursor:not-allowed}.car_rent{grid-area:rent;justify-self:end;margin-right:1rem}.filter{display:flex;flex-direction:column;gap:1rem;background-color:var(--color-secondary);padding:1rem;border-radius:.5rem}.filter_header{display:flex;justify-content:space-between;align-items:center}.filter_gearbox,.filter_fuel{display:flex;flex-direction:column;gap:.5rem}.filter_gearbox_options,.filter_fuel_options{display:flex;gap:.25rem;flex-wrap:wrap}.filter_seats{display:flex;flex-direction:column;gap:.5rem}.filter_seats select{width:100%}.filter_max-price{display:flex;flex-direction:column}.filter_max-price_value{display:flex;align-items:center;gap:.5rem;font-weight:700;justify-content:center}.filter_max-price input[type=range]{width:100%}.filter_max-price input[type=number]{border:none;background:none;text-align:end;font-weight:700;font-size:1rem;padding:0;outline:none}.filter[data-open=false] .filter_gearbox,.filter[data-open=false] .filter_seats,.filter[data-open=false] .filter_max-price,.filter[data-open=false] .filter_fuel{display:none}@media(min-width:768px){.filter[data-open=false] .filter_header{display:none}.filter[data-open=false] .filter_gearbox,.filter[data-open=false] .filter_seats,.filter[data-open=false] .filter_max-price,.filter[data-open=false] .filter_fuel{display:flex}}.rent-list-view{display:flex;flex-direction:column;gap:2rem;width:100%}.rent-list-view_title{color:var(--color-primary)}.rent-list-view{padding:2rem 1rem;max-width:1024px;margin:0 auto;width:100%}.rent-list-view{display:grid;padding:1rem;grid-template-areas:"title" "filter" "cars";gap:2rem}.rent-list-view_title{grid-area:title;text-align:center}.rent-list-view_filter{grid-area:filter}.rent-list-view_loader{grid-area:cars;display:flex;justify-content:center;align-items:center}.rent-list-view_cars{grid-area:cars;display:grid;grid-template-columns:1fr;gap:1rem}@media(min-width:768px){.rent-list-view_cars{grid-template-columns:repeat(auto-fit,minmax(200px,300px));gap:2rem;align-items:start}}@media(min-width:768px){.rent-list-view{display:grid;grid-template-areas:"title title" "filter cars";grid-template-columns:15rem 1fr;gap:2rem;padding:1rem 0}.rent-list-view_title{text-align:start}}
