/* -------------------------------------------------------------------------- */
/* RTB-RESP.CSS (c) richardthebrave.com ------------------------------------- */

/* -----------------------------------------------------------------------------
* MARK: XXS (384px)
*/

@media only screen and (min-width: 24rem) {

    .search-results {
        grid-template-columns: repeat(2, 1fr);
    }

}

/* -----------------------------------------------------------------------------
* MARK: XS (576px)
*/

@media only screen and (min-width: 36rem) {



}

/* -----------------------------------------------------------------------------
* MARK: SM (768px)
*/

@media only screen and (min-width: 48rem) {

    .search-results {
        grid-template-columns: repeat(3, 1fr);
    }
    .delivery-rates tr {
        grid-template-columns: 55% 1fr 1fr 1fr;
    }
    .delivery-rates.delivery-zones tr {
        grid-template-columns: 20% 1fr 1fr 1fr;
    }
    
    .delivery-rates thead th:not(:first-child) {
        display: block;
    }
    .delivery-rates tbody td {
        padding-top: var(--space-base);
    }
    .delivery-rates .mobile-only-label {
        display: none;
        opacity: 0;
    }
    .delivery-zones .span-3 {
        grid-column: span 3;
    }
    .zone-calculator {
        grid-template-columns: 3fr 1fr;
    }

    .zone-calculator .form-pair {
        align-items: center;
        display: flex;
        gap: var(--space-sm);
    }
    .zone-calculator .form-pair > input {
        height: 100%;
    }
    .zone-calculator .btn {
        width: 100%;
        text-align: center;
    }
    
    .sl-item {
        grid-template-columns: var(--space-huge) auto max-content;
    }


}

/* -----------------------------------------------------------------------------
* MARK: MD (960px)
*/

@media only screen and (min-width: 60rem) {

    .search-results {
        grid-template-columns: repeat(4, 1fr);
    }

}

/* -----------------------------------------------------------------------------
* MARK: LG (1152px)
*/

@media only screen and (min-width: 72rem) {

    .delivery-rates tr {
        grid-template-columns: 66% 1fr 1fr 1fr;
    }
    .search-results {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* -----------------------------------------------------------------------------
* MARK: XL (1344px)
*/

@media only screen and (min-width: 84rem) {
    .search-results {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* -----------------------------------------------------------------------------
* MARK: 2XL (1536px)
*/

@media only screen and (min-width: 96rem) {
    .search-results {
        grid-template-columns: repeat(7, 1fr);
    }

}