.c-posts-navigation {
border-top: solid 1px var(--wp--preset--color--gray-12);
padding-top: min(10vw, 4.3rem);
padding-bottom: min(10vw, 4.3rem);
padding-inline: 1rem;
}
.c-posts-navigation__wrapper {
display: flex;
flex-wrap: wrap;
max-width: var(--wp--style--global--wide-size);
margin-inline: auto;
}
.c-posts-navigation__column {
flex-basis: 100%;
display: flex;
flex-flow: column wrap;
gap: 1rem 1.875rem;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
text-align: center;
}
@media (min-width: 1024px) {
.c-posts-navigation__column {
flex-direction: row;
}
}
.c-posts-navigation__column:last-child .c-posts-navigation__content-wrapper {
order: 2;
}
.c-posts-navigation__img-wrapper {
width: 100%;
}
@media (min-width: 782px) {
.c-posts-navigation__column {
flex-basis: 50%;
}
.c-posts-navigation__column:first-child {
padding-right: 1rem;
border-right: solid 1px var(--wp--preset--color--gray-12);
text-align: left;
}
.c-posts-navigation__column:last-child {
padding-left: 1rem;
text-align: right;
}
.c-posts-navigation__img-wrapper {
max-width: 12.5rem;
}
.c-posts-navigation__column:last-child .c-posts-navigation__img-wrapper {
margin-left: auto;
}
}
.c-posts-navigation__img-wrapper a {
display: block;
width: 12.5rem;
height: 7.5rem;
margin-inline: auto;
}
.c-posts-navigation__thumbnail {
border-radius: 10px;
width: 100%;
height: 100%;
object-fit: cover;
}
.c-posts-navigation__content-wrapper {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
width: 100%;
}
@media (min-width: 1024px) {
.c-posts-navigation__content-wrapper {
width: calc(100% - 14.375rem);
align-items: center;
}
.c-posts-navigation__column:last-child .c-posts-navigation__content-wrapper {
order: 1;
}
.c-posts-navigation__column:last-child .c-posts-navigation__img-wrapper {
order: 2;
}
.c-posts-navigation__content-wrapper div {
max-width: 28.75rem;
}
.c-posts-navigation__column:last-child .c-posts-navigation__content-wrapper div {
margin-left: auto;
}
}
.c-posts-navigation__content-wrapper div {
width: 100%;
}
.c-posts-navigation__content-wrapper span {
display: block;
font-size: 15px;
margin-bottom: 0.8em;
}
.c-posts-navigation__post-title {
display: block;
width: 100%;
font-size: var(--wp--preset--font-size--medium);
line-height: 1.1;
}
.c-posts-navigation__post-title:hover,
.c-posts-navigation__post-title:focus {
color: var(--wp--preset--color--green-1);
}