.card {
    display: flex;
    flex-direction: column;
    gap: 1.875rem;
    padding: 0.625rem 0.75rem 1.625rem 0.75rem;
    border: 0.0625rem solid #ccc;
    border-radius: 2.5rem;
    max-width: 25rem;
    box-sizing: border-box;
    transition: transform 0.8s ease;
}

.card:hover,
.card:active {
    background: rgba(244, 246, 255, 1);
    transform: scale(1.13);
} 

.card-body {
    margin-top: 0;
    row-gap: 1rem;
    display: flex;
    flex-direction: column;
}

.card-heading {
    font-family: ALSGorizont_var;
    font-weight: 400;
    font-style: normal;
    font-size: 1.25rem;
    leading-trim: NONE;
    line-height: 120%;
    letter-spacing: -4%;
    padding: 0rem;
    margin: 0rem;
    color: #0D0D0D;
}

.card:hover .card-heading,
.card:active .card-heading {
    color: #3A65FF;
}

.card-image {
    width: 37.5rem;
    height: 21.125rem;
}

.card-body {
    margin-left: 0.875rem;
    margin-right: 0.875rem;
}

.card-image {
    border-radius: 1.875rem;
    width: 100%;
    height: 13.375rem;
    object-fit: cover;
}

.card-properties {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 0.5rem;
}

.property-divider {
    display: inline-block;
    width: 0.25rem;
    height: 0.25rem;
    background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle opacity='0.4' cx='2' cy='2' r='2' fill='%230D0D0D'/%3E%3C/svg%3E%0A");
    background-position: center;
    background-repeat: no-repeat;
}

.property-directions {
    font-family: PTGolos_vf;
    font-weight: 400;
    font-style: Regular;
    font-size: 0.8125rem;
    leading-trim: NONE;
    line-height: 1.25rem;
    letter-spacing: -2%;
    background-color: #9BEBE8;
    border-radius: 1.5rem;
    padding-top: 0.1875rem;
    padding-right: 0.5rem;
    padding-bottom: 0.25rem;
    padding-left: 0.5625rem;
    color: #0D0D0D;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 12.8125rem;
}

.web .property-directions {
    background-color: #152C9C;
    color: #fff;
}

.design .property-directions {
    background-color: #9BEBE8;
}

.ai .property-directions {
    background-color: #F6503A;
    color: #fff;
}

.bim .property-directions {
    background-color: #0B68FE;
    color: #fff;
}

.cad .property-directions {
    background-color: #EDB40B;
}

.motion .property-directions {
    background-color: #6E27B6;
    color: #fff;
}

.d3 .property-directions {
    background-color: #0DFBE7;
}

.code .property-directions {
    background-color: #00CCFF;
}


.property-duration {
    font-family: ALSGorizont_var;
    font-weight: 400;
    font-style: normal;
    font-size: 0.75rem;
    leading-trim: NONE;
    line-height: 120%;
    letter-spacing: 0.0625rem;
    color: #0D0D0D;
}

/*Стили для карточки в 3 колонки*/
.large-card.card {
    max-width: 80rem;
    width: 100%;
    flex-direction: row;
    column-gap: 1.5625rem;
    padding-bottom: 0.75rem;
}

.large-card .card-image {
    width: 37.5rem;
    height: 21.125rem;
}

.large-card .card-body {
    justify-content: center;
    row-gap: 1.125rem;
}

.large-card .card-heading {
    font-size: 2.25rem;
    letter-spacing: -6%;
}

.large-card .card-properties {
    column-gap: 0.8125rem;
}

.large-card .property-directions {
    padding: 0.375rem 0.625rem 0.375rem 0.625rem;
    font-size: 1rem;
}

.large-card .property-duration {
    font-size: 1rem;
    letter-spacing: -0.05rem;
}


@media screen and (max-width: 1200px) {
    .card {
        padding: 0.9375rem 0.9375rem 1.9375rem 0.9375rem;
        gap: 1.4375rem;
        max-width: 100%;
    }

    .card-body {
        margin-left: 1rem;
        margin-right: 1rem;
        row-gap: 1.125rem;
    }

    .card-image {
        height: 11.125rem;
    }

    .card-heading {
        font-size: 1.125rem;
    }

    .property-directions {
        padding: 0.125rem 0.5rem 0.1875rem 0.5rem;
    }

    .property-duration {
        letter-spacing: 2%;
    }

    /* Большая карточка: горизонтальная раскладка с картинкой ~690px */
    .large-card.card {
        column-gap: 1.5rem;
        flex-direction: column;
        width: 100%;
        padding: 0.875rem 0.9375rem 1.75rem 0.9375rem;
        row-gap: 2.25rem;
    }

    /* Картинка большой карточки адаптируется под ширину (~689x388) */
    .large-card .card-image {
        width: 100%;
        height: auto;
    }

    .large-card .card-heading {
        letter-spacing: -5.8%;
        font-size: 2rem;
    }
}

@media screen and (max-width: 768px) {
    .large-card.card, .card {
        padding: 0.75rem 0.75rem 1.75rem 0.75rem;
        row-gap: 1.6875rem;
    }

    .large-card .card-heading,
    .card .card-heading {
        font-size: 1.125rem;
        letter-spacing: -0.05rem;
        line-height: 1.375rem;
    }

    .large-card .card-body,
    .card .card-body {
        margin-left: 0rem;
        margin-right: 0rem;
    }

    .large-card .card-properties,
    .card .card-properties {
        column-gap: 0.5rem;
    }

    .large-card .property-directions,
    .card .property-directions {
        font-size: 0.875rem;
        padding: 0.25rem 0.5rem 0.25rem 0.5rem;
        line-height: 1rem;
    }

    .large-card .property-duration,
    .card .property-duration {
        font-size: 0.9375rem;
        line-height: 0.9375rem;
    }

    .card-image {
        height: 12.3125rem;
        border-radius: 1.5rem;
    }
}

/* Равная высота карточек в ряду (главная, рубрики, метки). */
/* Секции .catalog-cards-section и .category-cards-section — flex-сетки с переносом:
   обёртки <a> уже растягиваются на высоту ряда (align-items: stretch по умолчанию),
   а правила ниже заставляют саму карточку .card заполнять обёртку и прижимают
   метки «направление · время» к нижнему краю. */
.catalog-cards-section > a,
.category-cards-section > a {
    display: flex;                 /* <a> становится flex-контейнером для .card */
}

.catalog-cards-section > a > .card,
.category-cards-section > a > .card {
    flex: 1 0 auto;                /* карточка занимает всю высоту ряда */
}

.catalog-cards-section .card-body,
.category-cards-section .card-body {
    flex: 1 1 auto;                /* тело карточки поглощает свободное место */
}

.catalog-cards-section .card-properties,
.category-cards-section .card-properties {
    margin-top: auto;              /* направление и время прижаты к нижнему краю */
}