.posts {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.postArticle {
box-shadow: 0 0 10px #aaa;
display: flex;
align-items: center;
margin-bottom: 20px;
padding: 20px;
width: 32%;
transition: opacity 0.3s ease-out;
opacity: 0.6;
overflow: hidden;
flex-wrap: wrap;
}
.postArticle .post_img {
width: 100%;
margin-bottom: 5px;
}
.postArticle img {
width: 100%;
transition: transform .6s ease-out;
}
.postArticle .post_content {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
height: 100%;
width: 100%;
}
.postArticle .post_content p {
font-family: Cronos;
margin: 0;
text-align: justify;
}
.postArticle .post_content h2 {
text-align: center;
font-size: 24px;
font-family: Cronos;
margin-bottom: 5px;
}
.postArticle:hover {
opacity: 1;
box-shadow: 0 0 10px #777;
}
.wp-block-button__link {
font-family: Cronos;
border: 4px #eeeeee solid !important;
transition: all 0.3s;
letter-spacing: 1px;
margin-top: 5px;
}
.wp-block-button__link:hover {
background-color: white !important;
}
@media all and (max-width: 1000px) {
.postArticle {
width: 48%;
opacity: 1;
}
}
@media all and (max-width: 640px) {
.postArticle {
padding: 5px;
margin-bottom: 6px;
transition: all 0.3s;
}
.postArticle.close {
width: 0%;
max-width: 0%;
padding: 0;
}
.postArticle.open {
padding: 5px;
max-width: 98%;
width: 98%;
}
.wp-block-button__link {
font-size: 13px;
padding: 4px 8px;
}
.postArticle .post_content h2 {
display: none;
}
.postArticle .post_content p {
max-height: 0px;
overflow: hidden;
display: block;
transition: all 0.3s;
padding: 5px;
}
.postArticle:hover .post_content p{
max-height: 500px;
}
}