.news-block div{position: relative;}
.news-block img{width: 100%;}
main .news-block h2{position: absolute;bottom: 0;margin: 0;font-size: clamp(1.15rem, 1.1759rem + 0.3704vw, 1.25rem);z-index: 3;width: 100%;}
.news-block h2 a{display: block;padding: 7px;color: #fff;background-color: rgba(0,0,0,0.5);}
.news-block div:hover a{text-decoration: none;color: #eee;}
.postcontent img, img.center{margin-left: auto;margin-right: auto;}
.more-posts h2{margin-bottom: 1em;}
.more-posts img{border: 1px solid #000}
.rightcol{gap:20px}

@media only screen and (max-width: 480px) {

}
@media only screen and (min-width: 481px) {

}
@media only screen and (max-width: 767px) {
.rightcol, .news-block, .more-posts .flex{flex-direction:column}
.news-block{max-width: 420px;margin: 0 auto;}
.more-posts .flex div{display: flex; gap:10px}
.more-posts .flex div>a {flex:0 0 48%;max-width: 380px;}
.more-posts .flex div p{margin: 0;}
}
@media only screen and (min-width: 768px) {
.news-block, .more-posts .flex{flex-wrap: wrap}
.news-block div, .more-posts .flex div{flex-basis: calc(50% - 10px)}
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
.rightcol{flex-wrap:wrap}
.rightcol > *,.rightcol .news-block{flex:1 1 48%}
}
@media only screen and (max-width: 1023px) {

}
@media only screen and (min-width: 1024px) {
.news-block img {transition: transform 0.75s ease-in-out}
.news-block div{overflow: hidden;}
.news-block div:hover img {transform:scale(1.3)}
}
@media only screen and (min-width: 1024px) and (max-width: 1279px) {

.news-block div{flex-basis: 100%}
}
@media only screen and (min-width: 1024px) {

}