.cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Each row always fixed */
.card-row {
    display: flex;
    gap: 20px;
}

/* Default card */
.card {
    flex: 1;
    height: 200px;
    cursor: pointer;
    transition: 0.35s ease;
    overflow: hidden;
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 0 11px 0 #00000017;
}

/* Active expands */
.card.active {
    flex: 2.2;
    background: #fff;
}

.card-link {
    display: none;
}

/* Other cards shrink automatically */
.card-row .card:not(.active) {
    flex: 1;
}

.card__infos {
    width: 100%;
    height: 100%;
}

.card-title-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.card-icon {
    text-align: right;
}

.card-icon img {
    max-width: 46px;
}


.card-title-link {
    opacity: 0;
    height: 0;
    display: none;
    transition: opacity var(--animation-speed-fast) ease-in-out, height var(--animation-speed-fast) ease-in-out;
}


.card.active .card-title-link {
    opacity: 1;
    display: block;
}

.card.active .card-title-icon {
    display: none;
    opacity: 0;
    height: 0;
}

.card-title-icon .sub-title {
    font-size: 20px;
}

.card.active .card__infos {
    justify-content: space-between;
}


.card-title-link .card__author {
    margin-bottom: 20px;
}

.card-title-link .sub-title {
    margin-bottom: 10px;
}


@media (max-width: 1200px) {
    .card {
        height: 200px;
        padding: 15px;
    }

    .card-title-icon .sub-title {
        font-size: 18px;
    }


}

@media only screen and (min-width: 768px) and (max-width: 960px) {
    .card-title-icon .sub-title {
        font-size: 16px;
    }

    .card-title-link .card__author {
        margin-bottom: 15px;
        line-height: 1.3;
    }

    .card-row {
        gap: 15px;
    }

}


@media (max-width: 767px) {
    .card-row {
        flex-direction: column;
    }

    .card.active {
        flex: unset;
    }

    .card {
        height: 170px;
    }


}