﻿
.section__title .title, .title {
    font-weight: 700;
    font-size: 30pt;
}

.image-card {
    position: relative;
    display: block;
    height: 100%;
    border-radius: 5pt;
    overflow: hidden;
    text-decoration: none;
}

.card__image {
    width: auto;
    height: 260pt;
}

.card__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    border-radius: calc(40 * 1px);
    border-bottom-left-radius: 0pt;
    border-bottom-right-radius: 0pt;
    background-color: white;
    transform: translateY(100%);
    transition: .2s ease-in-out;
}

.image-card:hover .card__overlay {
    transform: translateY(0);
}

.card__header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2em;
    padding: 2em;
    border-radius: calc(40 * 1px) 0 0 0;
    background-color: white;
    transform: translateY(-99%);
    transition: .2s ease-in-out;
}

.card__header-text{
    text-align:center
}

.card__arc {
    width: 80px;
    height: 80px;
    position: absolute;
    bottom: 100%;
    right: 0;
    z-index: 1;
}

    .card__arc path {
        fill: white;
        d: path("M 40 80 c 22 0 40 -22 40 -40 v 40 Z");
    }

.image-card:hover .card__header {
    transform: translateY(0);
}

.card__thumb {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.card__title {
    font-size: 18pt;
    margin: 0 0 0.3em;
    font-weight: 600;
}

.card__status {
    font-size: 10pt;
    color: var(--text-blue);
    font-weight: 300;
}

.card__description {
    padding: 0 2em 2em;
    margin: 0;
    color: #354F9A;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-weight: 600;
    cursor: pointer;
    text-align:center;
}

sup {
    top: -0.3em;
    margin-left: 1pt;
}

.margin-10-20 {
    margin-top: 20%;
    margin-left: 10%;
}

.margin-5-15 {
    margin-top: 15%;
    margin-left: 5%;
}

@media (max-width: 1250px) {
    .text-center-mobile {
        text-align: center;
    }

    .margin-10-20 {
        margin-top: 30pt;
        margin-left: 10pt;
        margin-right: 10pt;
    }

    .margin-5-15 {
        margin: 10pt;
    }

    .margin-unset-mobile {
        margin: unset;
    }
}
