:root {
    --border-radius-s: 5px;
    --border-radius-m: 10px;
    --border-radius-l: 15px;
    --border-radius-xl: 20px;

}

h2 {
    &.page-title {
        text-transform: uppercase;
        font-size: 200%;
        padding-left: 32px;
        margin-top: 0;
        margin-bottom: 12px;

        @media screen and (max-width: 768px) {
            padding-left: 0;
            text-align: center;
            margin-top: 70px;
        }
    }

    &.page-subtitle {
        text-transform: none;
        font-size: 125%;
        padding-left: 32px;
        margin-top: 0;
        margin-bottom: 12px;
    }
}

#map-canvas {
    border-radius: var(--border-radius-m);
}

.price-display, .eta-display {
    font-family: var(--font-family), sans-serif;
    background-color: var(--primary);
    color: var(--secondary);
    border-radius: var(--border-radius-m);
    border: 2px solid var(--secondary);
    font-weight: bold;
    box-shadow: 0 0 80px #0000001A;

    span:first-of-type {
        font-size: 150%;
        @media screen and (max-width: 768px) {
            font-size: 100%;
        }
    }
    span:last-of-type {
        font-size: 300%;
        color: #fff;
        sup {
            color: #fff;
        }

        @media screen and (max-width: 768px) {
            font-size: 150%;
        }
    }
}

/** Border radius utility classes **/
.radius-s {
    border-radius: var(--border-radius-s);
}

.radius-m {
    border-radius: var(--border-radius-m);
}

.radius-l {
    border-radius: var(--border-radius-l);
}

.radius-xl {
    border-radius: var(--border-radius-xl);
}

.radius-none {
    border-radius: 0;
}

.radius-left-none {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.radius-right-none {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}