.jiffy-service-location-cards {
    .jiffy-select {
        position: relative;
        width: 100%;
        margin: 0 auto;
    }

    .jiffy-select select[data-el="serviceSelect"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;

        width: 100%;
        background: var(--jif-grey);
        border: 0;
        border-radius: 30px;

        /* space for the circle on the right */
        padding: 12px 56px 12px 16px;

        color: inherit;
        line-height: 1.2;
        cursor: pointer;

        &:focus-visible {
            outline: 2px solid var(--jif-primary);
            outline-offset: 2px;
        }
    }

    /* red circle */
    .jiffy-select::before {
        content: "";
        position: absolute;
        top: 50%;
        right: 8px;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--jif-primary);
        pointer-events: none; /* let clicks hit the select */
    }

    /* caret */
    .jiffy-select::after {
        content: "";
        position: absolute;
        top: 47%;
        right: 28px;
        transform: translate(50%, -50%) rotate(45deg);

        width: 10px;
        height: 10px;

        border-right: 1px solid #f1f1f1;
        border-bottom: 1px solid #f1f1f1;

        background: transparent;
        pointer-events: none;
    }

    /* IE/old Edge */
    select[data-el="serviceSelect"]::-ms-expand {
        display: none;
    }

    @media (min-width: 1024px) {
        .jiffy-select {
            width: min(33.333%, 520px); /* 1/3 of container, capped */
            margin-left: auto;
            margin-right: auto;
        }
    }

    p:first-of-type {
        font-style: italic;
        text-align: center;
        font-size: 15px;
        margin: 1rem 0 2rem 0;
    }
}