h1 {
font-family: inherit;
font-weight: bold;
font-size: var(--size-16);
margin-top: var(--size-5);
}
.featured-image {
max-width: 65ch;
margin-left: auto;
margin-right: auto;
padding-left: var(--size-12);
padding-right: var(--size-12);
margin-bottom: var(--size-12);
box-sizing: content-box;
display: flex;
flex-direction: column;
gap: var(--size-8);
align-items: center;
}
.featured-image img {
max-width: 100%;
max-height: 500px;
height: auto;
width: auto;
}
.featured-image figcaption {
text-align: center;
font-size: var(--size-9);
}
.post-gallery {
display: flex;
flex-wrap: wrap;
margin-left: auto;
margin-right: auto;
max-width: 1200px;
align-items: center;
justify-content: center;
gap: var(--size-12);
padding: var(--size-15);
margin-bottom: var(--size-18);
border-image: linear-gradient(#edeef2 0 0) fill 0//0 100vw;
}
.post-gallery--button img {
width: max(7.5rem, min(6.759rem + 3.704vw, 10rem));
height: max(7.5rem, min(6.759rem + 3.704vw, 10rem));
}
.post-footer {
display: flex;
flex-wrap: wrap;
gap: var(--size-15);
padding-left: var(--size-15);
padding-right: var(--size-15);
margin-bottom: var(--size-18);
}
.post-footer > :last-child {
margin-left: auto;
}
.post-nav {
display: flex;
align-items: center;
gap: var(--size-12);
position: relative;
}
.post-nav > * {
display: flex;
flex-direction: column;
gap: var(--size-7);
}
.post-nav a {
text-decoration: none;
}
.post-nav a::before {
content: "";
position: absolute;
inset: 0;
}
.post-nav h3 {
font-family: inherit;
font-weight: bold;
font-size: var(--size-12);
}
.post-nav hgroup {
display: contents;
}
.post-nav hgroup p:first-child {
text-transform: uppercase;
letter-spacing: 0.15em;
font-weight: bold;
font-style: normal;
line-height: 1.5;
font-size: var(--size-8);
}
.post-nav::before {
content: "";
display: block;
width: 50px;
height: 50px;
background: url(//traduki.eu/wp-content/themes/traduki/assets/svgs/arrow.svg) center/contain no-repeat;
animation: wiggle 0.5s ease-in-out infinite alternate paused;
}
.post-nav:last-child {
flex-direction: row-reverse;
text-align: right;
}
.post-nav:last-child::before {
transform: rotate(180deg);
}
.post-nav:hover::before {
animation-play-state: running;
}
@keyframes wiggle {
to {
translate: 4px 0;
}
}