ExpandableCard.module.css

.expandable_card_container {
    /* 
        Reduce the padding so we can increase the size of the header to 
        make it easily clickable w/o making it look rediculous
    */
    padding-top: .5rem;
    padding-bottom: .5rem;
    margin-top: .5rem;
    margin-bottom: .5rem;

    /* When we scroll to a card, make sure its not cutoff by the header */
    scroll-margin-top: 7rem; 

}

.expandable_card_container:hover {
    background-color: var(--color-light-background-accent);
}

.expandable_card_container_selected {
    background-color: var(--color-light-background-accent);
    padding-bottom: 2rem;
}

.header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    height: 20px;
}

.header p {
    margin-top: 0 !important;
    
}

.expandable_card_container p:first-of-type {
    margin-top: 0;
}

@media only screen and (min-width: 50em) { 
    .expandable_card_container {
        max-width: 70rem;
    }

    .header {
        height: 70px;
    }
}