/**
 *
 */

#front-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 30px;
    height: auto;
    min-height: calc(100vh - 80px - 80px);
    padding: 20px 10px;
}
#front-cards > * {
    flex: none;
    width: 400px;
    max-width: 100%;
    height: 270px;
    padding: 1.5rem;
    background-color: var(--bg-color);
    border: 1px transparent solid;
    transition: background-color .5s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-width: 0;
    flex-shrink: 1;
}
#front-cards > *:hover {
    border-color: var(--button-background-hover);
}
#front-cards > *:hover .front-cards-icon svg {
    /* fill: #fff; */
    fill: var(--bg-alter-color);
    transition: fill .5s;
}
#front-cards .front-cards-label {
    letter-spacing: 0.1em;
    font-family: var(--title-font-family);
    font-size: 1.4rem;
    text-align: center;
}
#front-cards .front-cards-description {
    text-align: justify;
    hyphens: auto;
    overflow-wrap: anywhere;
}

@media (max-width: 744px) {
    #front-cards {
        flex-direction: column;
    }
    /*
     * Карточки на всю доступную ширину, но не шире 400px.
     * В колоночном flex ширина карточки задаётся по поперечной оси и не
     * сжимается через flex-shrink, поэтому без явного ограничения карточка
     * выходила за пределы экрана (например, в Firefox).
     */
    #front-cards > * {
        width: 100%;
        max-width: 400px;
        height: auto;
        min-height: 270px;
    }
}