.kg-sectie--insta {
background: var(--wp--preset--color--surface);
}
.kg-insta {
padding: var(--wp--preset--spacing--40);
background: var(--kg-vlak-op);
border-top: 3px solid var(--wp--preset--color--accent);
}
.kg-insta__posts {
display: grid;
grid-template-areas: "post";
}
.kg-insta__post {
grid-area: post;
display: grid;
gap: var(--wp--preset--spacing--40);
align-items: center;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 0.5s ease,
visibility 0.5s;
}
.kg-insta__post.is-actief {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
@media (min-width: 62em) {
.kg-insta__post {
grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
gap: var(--wp--preset--spacing--50);
}
}
.kg-insta__beeld {
position: relative;
overflow: clip;
aspect-ratio: 4 / 5;
background: var(--kg-vlak-op);
}
.kg-insta__foto,
.kg-insta__video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.kg-insta__video {
background: transparent;
}
.kg-insta__play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
background: rgb(0 0 0 / 30%);
cursor: pointer;
transition: background 0.2s linear;
}
.kg-insta__play:hover,
.kg-insta__play:focus-visible {
background: rgb(0 0 0 / 15%);
}
.kg-insta__play:focus-visible {
outline: 2px solid var(--wp--preset--color--accent);
outline-offset: -4px;
}
.kg-insta__playvlak {
display: grid;
place-items: center;
width: 4.5rem;
height: 4.5rem;
border-radius: 50%;
background: var(--kg-knopvlak);
transition:
background 0.2s linear,
transform 0.2s ease;
}
.kg-insta__play:hover .kg-insta__playvlak,
.kg-insta__play:focus-visible .kg-insta__playvlak {
background: var(--kg-knopvlak-hover);
transform: scale(1.06);
}
.kg-insta__playvlak::before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0.6rem 0 0.6rem 1.05rem;
border-color: transparent transparent transparent var(--kg-op-rood);
margin-left: 0.2rem;
}
.kg-insta__post.is-vol .kg-insta__play {
display: none;
}
.kg-insta__kop {
margin: 0 0 var(--wp--preset--spacing--20);
font-family: var(--wp--preset--font-family--display);
font-size: 1.5rem;
font-weight: 700;
line-height: 1.15;
text-transform: uppercase;
letter-spacing: -0.01em;
}
.kg-insta__tekst {
max-width: 52ch;
color: var(--kg-zacht);
line-height: 1.65;
}
.kg-insta__tekst > * {
margin-block: 0 0.75em;
}
.kg-insta__tekst > :last-child {
margin-block-end: 0;
}
.kg-insta__link {
display: inline-block;
margin-top: var(--wp--preset--spacing--30);
color: var(--kg-rood);
font-family: var(--wp--preset--font-family--display);
font-size: 0.875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
text-decoration: none;
}
.kg-insta__link:hover,
.kg-insta__link:focus-visible {
text-decoration: underline;
}
.kg-insta__bediening {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.75rem;
margin-top: var(--wp--preset--spacing--40);
}
.kg-insta__teller {
margin: 0 0.25rem 0 0;
color: var(--kg-zacht);
font-family: var(--wp--preset--font-family--display);
font-size: 0.8125rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.kg-insta__teller b {
color: var(--kg-tekst);
}
.kg-insta__pijl {
display: flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
padding: 0;
border: 1px solid var(--kg-rand);
background: transparent;
color: var(--kg-tekst);
font-size: 1.125rem;
line-height: 1;
cursor: pointer;
transition:
background 0.2s linear,
border-color 0.2s linear,
color 0.2s linear;
}
.kg-insta__pijl:hover,
.kg-insta__pijl:focus-visible {
background: var(--kg-knopvlak);
border-color: var(--kg-knopvlak);
color: var(--kg-op-rood);
}
@media (prefers-reduced-motion: reduce) {
.kg-insta__post {
transition: none;
}
.kg-insta__playvlak {
transition: background 0.2s linear;
}
.kg-insta__play:hover .kg-insta__playvlak,
.kg-insta__play:focus-visible .kg-insta__playvlak {
transform: none;
}
}
.kg-insta:not(.kg-insta--draait) .kg-insta__posts {
display: grid;
grid-template-areas: none;
gap: var(--wp--preset--spacing--50);
}
.kg-insta:not(.kg-insta--draait) .kg-insta__post {
grid-area: auto;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.kg-insta:not(.kg-insta--draait) .kg-insta__bediening {
display: none;
}
.kg-insta:not(.kg-insta--draait) .kg-insta__play {
display: none;
}