@media only screen and (max-width: 768px) {
    html, body {
        margin: 0;
        height: 100%;
        overflow-x: hidden;
    }
    .banner h2 {
        text-align: center;
    }
    header.primary {
        padding: 20px 24px;
    }
    .container .form-body, #my-booking, #checkout {
        padding-left: 24px;
        padding-right: 24px;
    }
    footer.primary {
        padding: 25px 24px;
        display: block;
    }
    footer.primary div {
        margin-bottom: 15px;
    }
    .booking-box .step {
        padding: 40px 24px!important;
    }
    .court-map {
        width: 100%;
    }
    .login-box {
        padding: 50px 24px!important;
    }
    .booking-box .booking-datepicker {
        width: 100%!important;
        overflow-x: auto;
        overflow-y: hidden;
    }
    .flatpickr-calendar.inline {
        margin: auto;
    }
    .checkout-summary tr td, .summary-footer tr td {
        padding: 10px!important;
    }
    table.summary-footer tr td.total-price {
        font-size: 16px;
    }
    .checkout-summary .date, .checkout-summary .time, .checkout-summary .time, .checkout-summary tr td,
    .checkout-summary .court-name-label, .checkout-summary .court-name, .checkout-summary .price,
    #checkout table.summary-footer tr td.total-price, #checkout .summary-footer tr td {
        font-size: 14px;
    }
    .checkout-summary .court-name-label {
        margin-right: 10px;
    }
    .login-form, #payment-form {
        width: 100%!important;
    }
    form .form-element .form-note {
        margin-top: 4px;
        font-size: 14px;
    }
    .booking-box .court-list {
        justify-content: unset;
    }
    .booking-box .court-list.time-slots {
        margin-left: -10px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .booking-box .step, .login-box, #my-booking, #checkout {
        padding: 50px 30px!important;
    }
    .checkout-summary tr td, .summary-footer tr td {
        padding: 20px!important;
    }
    .checkout-summary .court-name, .checkout-summary .court-name-label,
    .checkout-summary .price, table.summary-footer tr td.total-price {
        font-size: 18px!important;
    }
    .checkout-summary .court-name-label {
        margin-right: 0;
    }
}

@media only screen and (max-width: 375px) {
    #checkout {
        padding-left: 16px;
        padding-right: 16px;
    }
    .checkout-summary tr td, .summary-footer tr td, table.booking-summary tr td, table.booking-summary tr th {
        padding: 14px 6px !important;
    }
    .booking-box .court-list {
        justify-content: center;
    }
}