/* *************************
 GENERAL
************************* */
.link-dark:hover,
.link-dark:focus {
    color: grey !important;
}

.link-text {
    margin-left: 0.3em;
}

.member-links a {
    display: block;
}

.member-links a {
    font-size: 14px !important;
}


/* *************************
 HORIZONTAL CARDS
************************* */
/* adapted from https://codingyaar.com/bootstrap-4-card-image-left-responsive/ */
@media only screen and (min-width: 768px) {
    .card {
        flex-direction: row;
        align-items: center;
    }

    .card-title {
        font-weight: bold;
    }

    .card img {
        border-top-right-radius: 0;
        border-bottom-left-radius: calc(0.25rem - 1px);
    }
}
@media only screen and (max-width: 768px) {
    .people .card {
        flex-direction: row;
        align-items: center;
    }
    
    .people .card-title {
        font-weight: bold;
    }
    
    .people .card img {
        border-top-right-radius: 0;
        border-bottom-left-radius: calc(0.25rem - 1px);
    }
}


.row.cards-row img {
    padding: 8px;
}



/* *************************
 SCREEN RESPONSIVENESS
************************* */
@media only screen and (max-width: 768px) {
    /*.card a {
        display: none;
    }*/

    .card-body {
        padding: 0.5em 1.2em;
    }

    .card-body .card-text {
        margin: 0;
    }

}

@media only screen and (max-width: 400px) {
    .d-400-none {
        display: none;
    }

    .d-400-block {
        display: block;
    }
}

@media only screen and (min-width: 400px) and (max-width: 576px) {
    .people .card img {
        width: 37%;
    }
}


@media only screen and (min-width: 576px) and (max-width: 768px) {
    .people .card img {
        width: 30%;
    }
}

/* *************************
 General
************************* */
@media only screen and (min-width: 768px) and (max-width: 992px) {
    .card img {
        width: 42%;
    }
}


@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .card img {
        width: 35%;
    }
}


@media only screen and (min-width: 1200px) and (max-width: 1400px) {
    .card img {
        width: 40%;
    }
}

@media only screen and (min-width: 1400px) {
    .card img {
        width: 41%;
    }
}
/* *************************
 software
************************* */
@media only screen and (max-width: 768px) {
    .software .card img {
        display: none;
    }
}

@media only screen and (min-width: 768px) and (max-width: 992px) {
    .software .card img {
        width: 30%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1400px) {
    .software .card img {
        width: 25%;
    }
}

@media only screen and (min-width: 1400px) {
    .software .card img {
        width: 20%;
    }
}