.post-template article {
    display: flex;
    flex-direction: column;
    gap:var(--list-gap-wide);
    align-items: center;
    justify-content: space-between;
    padding: var(--block-padding);
    width: var(--fluid-100-75);
    align-self:center;
    justify-self:center;
    box-sizing: border-box;
    max-width: 1080px;
}
.post-template article > * {
    text-align:left;
    align-content:flex-start;
    align-items:flex-start;
    width: 100%;
    text-wrap: pretty;
}
.post-template article .block-title {
    font-size:var(--s32-85);
    font-weight:var(--font-light-weight);
    text-transform:none;
    line-height:calc((100/85) * var(--s32-85));
    letter-spacing:calc(var(--s32-85) * 0.02);
    text-wrap: initial;
    width: 100%;
    max-width: 100%;
}
.post-template article .block-feature-text {
    line-height: calc(var(--s32-50) * 1)
}
.post-template article p + h2 {
    margin-top: calc(var(--list-gap-wide) * 2);
}
.post-template article .block-feature-text {
    line-height: calc(var(--s32-50) * 1);
    text-wrap: balance;
}
.post-template > aside {
    width:100%;
}   
:root {
    --meta-gap: calc(var(--list-gap-wide) * 0.66);
}
.article-meta {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: var(--meta-gap);
}
.article-meta > *, 
.article-meta .excerpt p {
    display: flex;
    flex-direction: column;
    font-size: var(--s10-14);
    line-height: calc(var(--s10-14) * 1.4);
}
.article-meta > .excerpt p {
    display:block;
    text-wrap:pretty;
}
.article-meta .data,
.article-meta .data .meta-wrapper{
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap:wrap;
    gap: var(--s10-16);
    max-width: 100%;
    flex: 0 1 auto;
    position:relative;
}
.article-meta .data .meta-wrapper {
    gap:var(--s10-16);
}
.article-meta .data .meta-wrapper > *:not(.category) {
    position:relative;
    padding-left:calc(var(--s14-20) + var(--s5-8));
}
.article-meta .meta-wrapper > *:not(.category)::before {
    content:"";
    position:absolute;
    top:50%;
    left:0;
    transform:translateY(-50%);
    width:var(--s14-20);
    height:var(--s14-20);
    background:var(--main-text-colour);
    mask-size: 100% 100%;
    mask-position: 0% 0;
    mask-repeat:no-repeat;
}
.article-meta .meta-wrapper > .meta:before {
    mask-image: url(../../assets/img/Calendar\ Icon.svg);
}
.article-meta .meta-wrapper > .read-time:before {
    mask-image: url(../../assets/img/Clock\ Icon.svg);
}

.article-meta .associations {
    display: flex;
    flex-direction:row;
    text-align: left;
    color:var(--main-text-colour);
    width: auto;
    font-size:var(--s12-18);
    gap: var(--s5-8);
    flex-wrap:nowrap;
    overflow-x:auto;
    flex: 1 1 35%;
    max-width: calc(100% + var(--s8-16));
    mask: linear-gradient(to left, transparent 0%, black var(--s8-16), black calc(100% - var(--s8-16)), transparent 100%);
    padding: 0 var(--s8-16);
    margin: 0 0 0 calc(var(--s8-16) * -1);
    box-sizing: border-box;
    /* scroll-margin-left: var(--s8-16); */
    scroll-padding-left: var(--s8-16);
}
.article-meta .associations span,
.article-meta .category{
    color:var(--main-text-colour);
    white-space:nowrap;
    border:0.2px solid var(--main-text-colour);
    border-radius:var(--s16-32);
    padding: calc((var(--s5-8) / var(--s10-14)) * var(--s5-8)) calc((var(--s10-16) / var(--s10-14)) * var(--s10-16));
    font-size: var(
    --s10-14);
    line-height: calc(var(
    --s10-14) * 1.4);
}
.article-meta .category {
    background:var(--main-text-colour);
    color:var(--white);
}
.article-meta .excerpt {
    flex: 1 0 100%;
    width: 100%;
    border-top:0.5px solid var(--light-grey);
    padding-top: var(--meta-gap);
    gap: var(--s5-8);
}
.post-template article > .article-image-container {
    display: flex;
    justify-content: center;
    width: calc(100vw);
    flex-direction: column;
    box-sizing: border-box;
    align-items: center;
    padding: 0 var(--block-padding-x);
    max-width: var(--maxWidthPX);
    aspect-ratio: 2/1;
}
.article-hero, 
.article-hero img {
    position: relative;
    display:flex;
    flex: 0 1 100%;
    align-items: center;
    flex-direction: column;
}
.article-hero {
    border-radius: var(--s5-8);
    overflow: hidden;
    max-height: 85vh;
    max-width: 100%;
    max-height: calc(var(--maxWidthPX) / 2);
    width: 100%;
    aspect-ratio: 2/1;
}
.article-hero img {
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    width: 100%;
    flex-direction: row;
    flex: 0 1 100%;
    max-height: calc(var(--maxWidthPX) / 2);
}
.post-template article > .article-image-container + p,
.post-template article > :first-child.block-title + p {
    margin-top:calc(var(--list-gap-wide) * 2);
    font-size: var(--s16-32);
    line-height: calc(41/32 * var(--s16-32));
}
.post-template article li {
    margin-top:var(--list-gap);
}
.post-template article ul > li:first-of-type {
    margin-top:0;
}
.article-wrapper .categories-wrapper, 
.article-wrapper .categories {
    display: flex;
    flex-direction: row;
    gap: var(--list-gap);
    padding: 0 var(--s8-16);
    overflow-x: auto;
    max-width: calc(100% + (var(--s8-16) * 2));
    flex-wrap: nowrap;
    flex-shrink: 1;
    margin:0 calc(var(--s8-16) * -1);
    mask:linear-gradient(to left, transparent 0%, black var(--s8-16), black calc(100% - var(--s8-16)), transparent 100%);
}
.article-wrapper .categories-wrapper {
    min-width: 100%;
}
.article-wrapper .categories .kw-pill {
    position: relative;
    border-radius: var(--s16-32);
    display: flex;
    flex-direction: column;
    white-space: nowrap;
    background: var(--light-grey);
    padding: var(--s8-12) var(--s8-12);
    line-height: 0;
    font-size: var(--s8-12);
    letter-spacing: 0.03em;
    -webkit-font-smoothing: antialiased;
    justify-content: center;
}