.title {
    font-variant: small-caps;
    font-weight: 600;
    color: var(--mino);
    text-align: center;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.card {
    margin-top: 1em;
    margin-bottom: 1em;
    border-radius: 12px;
    text-align: center;
    -webkit-transition: all 2s cubic-bezier(0.165, 0.84, 0.44, 1);
    -ms-transition: all 2s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 2s cubic-bezier(0.165, 0.84, 0.44, 1);
    background-color: var(--mino);
}

.card:hover {
    -webkit-transition: all 2s cubic-bezier(0.165, 0.84, 0.44, 1);
    -ms-transition: all 2s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 2s cubic-bezier(0.165, 0.84, 0.44, 1);
    background-color: var(--mino-light);
}

.card img {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    max-width: 300px;
    max-height: 300px;
}

.card h3,
.card h4 {
    color: var(--white);
}

.card h3:hover,
.card h4:hover {
    color: var(--white);
}

.card-title {
    font-variant: small-caps;
}

#components a {
    color: var(--white);
    text-decoration: none !important;
}