:root, ::marker, ::before, ::after {
    --ingham-button-height: 4rem;
}

h1, h2, h3, h4, h5 {
    padding:            0;
    margin:             0;
    max-width:          none;
}

.vehicle-reserve .vr {
    padding:            2rem 1rem 1rem;
    display:            grid;
    gap:                1.5rem;
    justify-content:    center;
}
    html.iframe .vehicle-reserve .vr {
        display:        block;
        padding:        0;
    }

.vr .box.title {
    margin-bottom:      0.25rem;
}
    .vr .box.title h1 {
        word-break:     break-word;
        hyphens:        auto;
    }
    html.iframe .vr .box.title {
        display:        none;
    }
.vr .box.embed {
    background:         #f4f4f4;
    padding:            1rem;
    justify-self:       center;
    display:            flex;
    flex-direction:     column;
    gap:                1.5rem;
    align-items:        center;
    border-top-left-radius:     var(--ingham-border-radius-top-left);
    border-top-right-radius:    var(--ingham-border-radius-top-right);
    border-bottom-left-radius:  var(--ingham-border-radius-bottom-left);
    border-bottom-right-radius: var(--ingham-border-radius-bottom-right);
}
    .vr .box.embed .thumb {

    }
    .vr .box.embed img {
        max-width:      100%;
        max-height:     150px;
        display:        block;

        border-top-left-radius:     var(--ingham-border-radius-top-left);
        border-top-right-radius:    var(--ingham-border-radius-top-right);
        border-bottom-left-radius:  var(--ingham-border-radius-bottom-left);
        border-bottom-right-radius: var(--ingham-border-radius-bottom-right);
    }
    .vr .box.embed .details {
        padding-right:  0.5rem;
    }
        .vr .box.embed .details > h3 {
            word-break:     break-word;
            hyphens:        auto;
        }
        .vr .box.embed .details > h4 {
            font-family:    var(--ingham-font-family-body);
            font-weight:    400;
            font-size:      1.1rem;
            margin:         0.25rem 0 0.75rem 0;
        }
        .vr .box.embed .details > div {
            margin-top:     0.25rem;
        }
        .vr .box.embed .details > div:not(:last-child) {
            margin-bottom:  0.25rem;
        }
        .vr .box.embed .details .price .special {
            color:          #F21B07;
            font-style:     italic;
            line-height:    1;
            padding-right:  0.25rem;
            text-decoration: line-through;
        }
        .vr .box.embed .details .price span:last-child {
            font-style:     italic;
            font-size:      0.75rem;
        }
    .vr .box.form > div {
        margin:         0;
    }
        .vr .box.form form .clear {
            display:    none;
        }





/*  ~~~~~~~~~~~~~~~~~~
    RESPONSIVE CSS
~~~~~~~~~~~~~~~~~~  */
/*  GRID @ 800px    */
@media only screen and (min-width: 961px) {
    .vehicle-reserve .vr {
        --s:                250px;
        --g:                2rem;
        padding:            1.5rem;
        align-items:        start;
        gap:                var(--g);
        grid-template-columns:  calc(100% - var(--g) - var(--s)) var(--s);
    }
        .vr .box.title {
            grid-column:    1 / span 2;
            grid-row:       1;
        }
    /* LEFT col */
        .vr .box.form {
            grid-column:    1;
            grid-row:       2;
        }
    /* RIGHT col */
        .vr .box.embed {
            grid-column:    2;
            grid-row:       2;
        }
}
/*  DESIGN  */
@media only screen and (min-width: 501px) {
    .vr .box.embed {
        flex-direction:     row;
    }
}
@media only screen and (max-width: 600px) {

}
@media only screen and (min-width: 601px) {

}
@media only screen and (min-width: 601px) and (max-width: 800px) {

}
@media only screen and (max-width: 800px) {

}
@media only screen and (min-width: 801px) {

}
@media only screen and (min-width: 801px) and (max-width: 860px) {

}
@media only screen and (min-width: 801px) and (max-width: 960px) {

}
@media only screen and (min-width: 801px) and (max-width: 1164px) {

}
@media only screen and (min-width: 861px) and (max-width: 960px) {

}
@media only screen and (min-width: 961px) {
    .vr .box.embed {
        gap:                0.75rem;
        flex-direction:     column;
        align-items:        flex-start;
    }
    .vr .box.form > div {
        max-width:          none;
    }
    .vr .box.embed h3 {
        margin-bottom:      0.25rem;
    }
    .vr .box.embed img {
        max-height:         none;
    }
}
@media only screen and (min-width: 961px) and (max-width: 1164px) {
    .vehicle-reserve > .cc {
        max-width:          none;
    }
}
@media only screen and (max-width: 1164px) {

}
@media only screen and (min-width: 1165px) {
    .vehicle-reserve .vr {
        --s:                350px;
        padding:            1.5rem 0;
        gap:                2rem;
    }
}
@media only screen and (min-width: 1165px) and (max-width: 1400px) {

}
@media only screen and (max-width: 1400px) {

}
@media only screen and (min-width: 1401px) {

}