* {
    /* outline: 1px solid red; */
}
@media (width <= 1440px) {
    header {
        display: none;
    }
    header.mobile {
        display: flex;
    }
    
}
@media (width <= 1024px) {
    div.card-profile {
        flex-direction: column;
        height: auto;
        gap: 0;
    }
    div.card-profile .d1 {
        width: 100%;
    }
    .card-form {
        padding-left: max((100% - 1500px) / 2, 0px);
        padding-right: max((100% - 1500px) / 2, 0px);
        padding: 10px;
    }
    div.add-new-card {
        padding-left: max((100% - 1500px) / 2, 40px);
        padding-right: max((100% - 1500px) / 2, 40px);
        overflow: auto;
        align-items: flex-start;
    }
    div.add-new-card form {
        width: 100%;
        flex-direction: column;
        min-height: 500px;
        height: auto;
    }
    div.add-new-card form .d1 {
        width: 100%;
        height: 100%;
    }
    section.basket .d1:last-child {
        position: fixed;
        width: auto;
        max-width: 500px;
        height: calc(100vh - 100px);
        top: 100px;
        right: -250%;
    }
    button#on-create-order {
        display: block;
    }
    .close-order-list {
        display: block;
    }
    .basket-card div.body {
        display: flex;
        padding: 0 10px;
    }
}
@media (width <= 834px) {
    header {
    }
    section.profile {
        padding-left: 0px;
        padding-right: 0px;
        width: 100%;
    }
    section.profile div.info-link {
        padding: 40px 10px 10px 10px;
    }
    section.profile div.profile {
        grid-template-columns: 1.5fr 2fr;
        gap: 20px;
    }
    div.profile div.d1:nth-child(2) {
        gap: 0;
    }
    div.profile div.d1:first-child {
        border: none;
    }
    div.profile div.d1 {
        border-top: none;
    }
    div.profile div.d1 div.profile-block, div.profile form.block-2 {
        border-radius: 0px;
    }
    div.profile div.d1:last-child {
        grid-column: span 2;
        display: none;
    }
    div.profile form.block-2 div.desc {
        padding-top: 20px;
    }
    div.add-new-card {
        padding-left: max((100% - 1500px) / 2, 40px);
        padding-right: max((100% - 1500px) / 2, 40px);
    }
    
}
@media (width <= 768px) {

}
@media (width <= 480px) {
    header {
    }
    section.profile {
        padding-left: 0px;
        padding-right: 0px;
        width: 100%;
    }
    section.profile div.info-link {
        padding: 40px 10px 10px 10px;
    }
    section.profile div.profile {
        grid-template-columns: 1fr;
        gap: 0;
    }
    div.profile div.d1:nth-child(2) {
        gap: 0;
    }
    div.profile div.d1:first-child {
        border: none;
    }
    div.profile div.d1 {
        border-top: 2px solid var(--gray-2);
    }
    div.profile div.d1 div.profile-block, div.profile form.block-2 {
        border-radius: 0px;
    }
    div.add-new-card form {
        width: 100%;
    }
    div.add-new-card {
        padding-left: max((100% - 1500px) / 2, 0px);
        padding-right: max((100% - 1500px) / 2, 0px);
    }
    .total-sum-product {
        align-self: flex-end;
        white-space: nowrap;
    }
}



/* grid сетки */
@media (width <= 1450px) {
    .mt-1 .category-car {
        grid-template-columns: repeat(4, 250px);
    }
    section.catalog {
        display: grid;
        grid-auto-columns: 1fr;
        grid-template-columns: 1fr;
        gap: 30px;
    }
    section.catalog .d-filter {
        height: 100vh;
        position: fixed;
        top: 100px;
        left: -100%;
        background-color: #fff;
        z-index: 2;
        overflow-y: auto;
        transition: 0.2s all linear;
    }
    section.catalog .d1 .filter img.exit {
        display: block;
    }
    section.catalog .search-line button.btn-2 {
        display: block;
    }
    section.catalog .d1 .catalog-card {
        grid-template-columns: repeat(4, 300px);
    }
}
@media (width <= 1350px) {
    section.catalog .d1 .catalog-card {
        grid-template-columns: repeat(3, 300px);
    }
}
@media (width <= 1050px) {
    section.catalog .d1 .catalog-card {
        grid-template-columns: repeat(2, 300px);
    }
}
@media (width <= 750px) {
    section.catalog .d1 .catalog-card {
        grid-template-columns: repeat(2, 250px);
    }
    section.catalog label.search {
        display: none;
    }
}
@media (width <= 650px) {
    section.catalog .d1 .catalog-card {
        gap: 15px;
    }
    section.catalog .d1 .catalog-card .card {
        box-shadow: none;
        border-radius: 0;
    }
    section.catalog .d1 .catalog-card .card .b1 {
        border-radius: 0;
    }
    section.catalog {
        padding-left: max((100% - 1500px) / 2, 0px);
        padding-right: max((100% - 1500px) / 2, 0px);
    }
    section.catalog .search-line {
        padding: 0 10px;
    }
    section.catalog .d1 .filter {
        width: 100vw;
        border: none;
        border-radius: 0;
    }
    section.catalog .filter-link {
        padding: 0 10px;
    }

    section.basket .d1:first-child {
        padding: 0;
    }
}
@media (width <= 500px) {
    section.catalog .d1 .catalog-card {
        grid-template-columns: repeat(1, 1fr);
    }
}


@media (width <= 1200px) {
    .mt-1 .category-car {
        grid-template-columns: repeat(3, 250px);
    }
    section.basket .d1:last-child {
        padding: 90px 40px;
    }
}
@media (width <= 950px) {
    .mt-1 .category-car {
        grid-template-columns: repeat(2, 250px);
    }
}
@media (width <= 700px) {
    .mt-1 .category-car {
        grid-template-columns: repeat(1, 250px);
    }
    section.basket .d1:last-child {
        width: 100vw;
    }
}
@media (width <= 450px) {
    div.card-on-basket {
        padding: 20px 5px;
    }
    div.card-on-basket div.name div.title {
        padding-left: 5px;
    }
}
@media (width <= 360px) {
    div.card-on-basket div.img {
        aspect-ratio: 1/1.5;
    }
}