h3 {
    margin: 0;
    padding: 0;
}

.cards-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Auto responsive member cards */
    grid-gap: 1rem;
    justify-content: center;
}

.card-header {
    color: var(--font-color);
    padding: 1rem;
    background-color: #31343b;
    position: relative;
    z-index: 1;
}

@media (max-width: 1024px) {
    .cards-wrapper {
        grid-template-columns: 1fr;
    }
}

.card-body input, textarea {
    background-color: #31343b !important;
    border-color: var(--color-opacity-light-5) !important;
    color: var(--font-color) !important;
    
    &:focus {
        color: var(--font-color);
        background-color: #31343b;
        box-shadow: none;
        border-color: unset;
    }
    
}

.input-group-text {
    background-color: #31343b;
    color: var(--font-color);
    border-color: var(--color-opacity-light-5) !important;
}

.send-button {
    border-color: var(--color-opacity-light-5) !important;
    background-color: #31343b;
    color: var(--font-color);
    opacity: 1;
    
    &:hover {
        color: var(--font-color);
        opacity: 0.8;
    }
}

.card-body label {
    margin-left: 0.5rem;
}