@media (min-width: 62em) {
.kg-verhaal:has(.kg-archief) {
grid-template-rows: auto auto;
}
.kg-verhaal:has(.kg-archief) .kg-verhaal__woord {
grid-row: 1 / span 2;
}
.kg-archief {
grid-column: 2;
grid-row: 1;
align-self: end;
}
.kg-verhaal:has(.kg-archief) .kg-verhaal__portret {
grid-column: 2;
grid-row: 2;
}
}
@media (min-width: 78em) {
.kg-verhaal:has(.kg-archief) {
grid-template-columns: minmax(0, 40rem) minmax(0, 1fr);
grid-template-rows: auto;
}
.kg-verhaal:has(.kg-archief) .kg-verhaal__woord {
grid-row: 1;
}
.kg-verhaal:has(.kg-archief) .kg-archief {
grid-row: 1;
justify-self: start;
width: 66%;
margin-left: 0;
}
.kg-verhaal:has(.kg-archief) .kg-verhaal__portret {
z-index: 1;
grid-row: 1;
justify-self: end;
width: 58%;
}
}
@media (max-width: 61.999em) {
.kg-verhaal:has(.kg-archief) .kg-verhaal__portret {
display: none;
}
}
.kg-archief {
--kg-hoek: -2.4deg;
--kg-papier: #fff;
--kg-inkt: color-mix(in srgb, var(--wp--preset--color--base) 72%, #6b5a48);
margin: 0 0 0 3rem;
}
@media (min-width: 62em) and (max-width: 77.999em) {
.kg-verhaal:has(.kg-archief) {
justify-content: space-between;
}
.kg-archief {
margin-bottom: var(--wp--preset--spacing--40);
}
}
.kg-archief__afdruk {
position: relative;
padding: 0.85rem 0.85rem 0.6rem;
background: var(--kg-papier);
transform: rotate(var(--kg-hoek));
box-shadow:
0 2px 4px rgb(0 0 0 / 35%),
0 26px 50px -22px rgb(0 0 0 / 75%);
}
.kg-archief__afdruk::before {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: min(6.5rem, 26%);
height: 1.55rem;
background: linear-gradient(
80deg,
rgb(255 255 255 / 26%),
rgb(255 255 255 / 13%) 30%,
rgb(255 255 255 / 30%) 55%,
rgb(255 255 255 / 16%)
);
border-top: 1px solid rgb(255 255 255 / 22%);
border-bottom: 1px solid rgb(0 0 0 / 12%);
transform: translate(-50%, -50%) rotate(calc(-1 * var(--kg-hoek) - 45deg));
content: "";
}
.kg-archief__foto {
display: block;
width: 100%;
height: auto;
}
.kg-archief__notitie {
margin-top: 0.7rem;
padding-left: 0.35rem;
color: var(--kg-inkt);
text-align: left;
font-family: var(--wp--preset--font-family--accent);
font-style: italic;
font-size: 1.0625rem;
line-height: 1.2;
transform: rotate(-0.7deg);
transform-origin: left center;
}
@media (max-width: 61.999em) {
.kg-archief {
width: min(100% - 4rem, 24rem);
margin-inline: auto;
}
}