.post {
    position:relative;
    padding-bottom:100%;
    background-color:var(--color-7);
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center center;
    border-radius:20px;
    transition:all ease 0.3s;
    overflow:hidden;
}
.post:hover {
    transition:all ease 0.3s;
}
.post .content {
    position:absolute;
    bottom:0;
    right:0;
    left:0;
    margin:10px;
    background:rgba(199, 199, 199, 0.226);
    backdrop-filter: blur(13px);
    padding:10px;
    border-radius:20px;
    text-align:center;
}
.post .content .title {
    font-weight:bold;
    max-height:100px;
    overflow:hidden;
    display: block;
    -webkit-line-clamp: 2;
    display: box;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    white-space: normal;
    color:var(--text-color-7);
    word-break: normal;
    font-size:var(--mini-title-text-size);
}
.post .content .description {
    color:var(--text-color-9);
    max-height:100px;
    overflow:hidden;
    display: block;
    -webkit-line-clamp: 2;
    display: box;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: normal;
    font-size:var(--paragraphe-text-size);
}
.post .heartSVG {
    position:absolute;
    top:6px;
    right:6.5px;
    width:40px;
    height:40px;
}
.post .heartSVG:focus,.post .heartSVG:active {
    outline:0;
}
.post .heart {
    transform-origin: top;
    transform: rotateX(0deg)  translateY(0);
    position:absolute;
    color:var(--text-color-7);
    top:45px;
    right:7px;
    width:37px;
    text-align:center;
    font-weight:bold;
    text-shadow: 0px 0px 8px #000000;
    opacity:1;
    transition: all 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.post *::selection {
    background-color:transparent;
}
.post .heart.hidden1 {
    opacity:0;
    transform: rotateX(-90deg) translateY(25px);
    transition: all 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.post .heart.hidden2 {
    opacity:0;
    transform: rotateX(90deg) translateY(-25px);
    transition: all 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.post .action {
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:all ease 0.5s;
}
.post:hover .action {
    max-height:70px;
    opacity:1;
    transition:all ease 0.5s;
}
.date-wrapper {
    position:relative;
}
.date-wrapper .date {
    position:absolute;
    top: 100%;
    left:0;
    right:0;
    text-align: center;
}
.date-wrapper .date .value {
    display:inline-block;
    background:rgba(255, 255, 255, 0.089);
    padding:0 40px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    color:var(--text-color-1);
    transform: perspective(1200px) rotateX(90deg);
    transform-origin: top;
    background-size:100% 400%;
    opacity:0.6;
    font-size:var(--paragraphe-text-size);
    transition:all ease 0.5s;
}
.date-wrapper:hover .date .value {
    opacity:1;
    transform: perspective(1200px) rotateX(0);
    background-size:100% 100%;
    transition:all ease 0.5s;
}