#electedBlock {
    /*padding: 2em 0;*/
    border: 0;
    background: linear-gradient(to bottom, var(--cc-darkBlue) 0%, #000 100%);
    overflow: visible;
}

    #electedBlock .commCard {
        height: 30em;
        display: flex;
        flex-direction: column;
        background: rgba(0, 0, 0, 0.75);
        flex: 1 0 0px;
        border-left: 2px solid rgb(51, 51, 51);
        border-right: 2px solid rgb(51, 51, 51);
        overflow: hidden;
    }

        #electedBlock .commCard h3 {
            color: #fff !important;
            text-align: center;
        }

    #electedBlock .preMap {
        display: flex;
        justify-content: center;
        align-items: end;
        flex: 1 0 auto;
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    #electedBlock .preMapOriginal,
    #electedBlock .preMapHover {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center center;
        transition: opacity 0.3s ease;
    }
    #electedBlock .preMapHover .is-missing {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        color: white;
        background-size: cover;
        background-position: center center;
        transition: opacity 0.3s ease;
    }

    #electedBlock .preMapOriginal {
        z-index: 1;
        opacity: 1;
    }

    #electedBlock .preMapHover {
        z-index: 2;
        opacity: 0;
    }

    #electedBlock .preMap:hover .preMapOriginal {
        opacity: 0;
    }

    #electedBlock .preMap:hover .preMapHover {
        opacity: 1;
    }

    /* Label overlay */
    #electedBlock .preLabel {
        position: relative;
        color: #fff;
        font-size: 1em;
        width: 100%;
        text-align: center;
        background: rgba(0, 0, 0, 0.8);
        padding: .25em 0;
        z-index: 3; /* ensures label stays above images */
    }

    #electedBlock .preMap:hover .preLabel {
        background: rgba(0, 0, 0, 0.6);
    }

    /* Precinct info below the card */
    #electedBlock .precinctInfo {
        margin-top: 0.5em;
        text-align: center;
        color: #fff;
    }

    #electedBlock .precinctMap {
        width: 100%;
        height: 8em; /* adjust as needed */
        background-size: cover;
        background-position: center;
        margin-top: 0.25em;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }

.is-missing {
    width: 100%;
    height: 100%;
    display: flex;
    border: 1px solid #ccc;
    border-radius: unset;
    color: #666;
    text-align: center;
    align-items: center;
    justify-content: center;
}