.kkc-article {
--kkc-main: 730px;
--kkc-side: 470px;
--kkc-gap: 65px;
font-size: 1rem;
line-height: 1.625;
}
.kkc-article p {
margin: 0 0 1.5em;
} .kkc-indent.kkc-post > p + p,
.kkc-indent .kkc-main > p + p {
text-indent: var(--kkc-indent, 2.5em);
}
.kkc-indent.kkc-post > p.kk-para-spacer,
.kkc-indent.kkc-post > p.kk-para-spacer + p,
.kkc-indent .kkc-main > p.kk-para-spacer,
.kkc-indent .kkc-main > p.kk-para-spacer + p {
text-indent: 0;
}
.kkc-article h2,
.kkc-article h3,
.kkc-article h4 {
margin: 1.8em 0 .6em;
line-height: 1.4;
} .kkc-article figure.wp-block-image {
margin: 2em auto;
text-align: center;
}
.kkc-article figure.wp-block-image img {
display: block;
width: auto;
max-width: 100%;
height: auto;
margin-inline: auto;
object-fit: contain;
}
.kkc-article figure.wp-block-image figcaption {
margin-top: .7em;
font-size: .88em;
line-height: 1.6;
opacity: .6;
text-align: center;
} .kkc-head {
margin: 0 0 1.6em;
}
.kkc-title {
margin: 0 0 .3em;
font-size: clamp(1.65rem, 2.2vw, 2.15rem);
line-height: 1.3;
}
.kkc-meta {
margin: 0;
font-size: .9em;
opacity: .6;
}
.kkc-meta a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid currentColor;
}
.kkc-dot {
opacity: .5;
margin-inline: .35em;
}
.kkc-state {
display: inline-block;
margin: 0 0 .9em;
padding: 4px 12px;
border-radius: 999px;
background: #f3e6c8;
color: #6b5220;
font-size: .8em;
} .kkc-cover {
margin: 0 auto 2.4em;
text-align: center;
}
.kkc-cover img {
display: block;
width: auto;
max-width: 100%;
height: auto;
margin-inline: auto;
object-fit: contain;
}
.kkc-cover figcaption {
margin-top: .7em;
font-size: .88em;
opacity: .6;
} .kkc-work { max-width: 1290px;
margin-inline: auto;
padding-inline: 12px;
}
.kkc-work .kkc-rule {
height: 1px;
background: rgba(0, 0, 0, .16);
margin: 0 0 3.2em;
}
.kkc-work .kkc-grid {
display: grid;
grid-template-columns: minmax(0, var(--kkc-main)) minmax(0, var(--kkc-side));
gap: var(--kkc-gap);
justify-content: center;
align-items: start;
}
.kkc-work .kkc-side {
border-left: 1px solid rgba(0, 0, 0, .14);
padding-left: 40px;
} .kkc-details { font-family: Maitree, "Noto Serif Thai", serif;
}
.kkc-details h3 {
margin: 0 0 .6em;
font-size: 25px;
line-height: 1.35;
}
.kkc-details dl {
margin: 0;
}
.kkc-details .kkc-drow {
display: flex;
gap: .4em;
flex-wrap: wrap;
margin: 0;
font-size: 1.0625rem;
line-height: 2.35;
}
.kkc-details dt {
margin: 0;
flex: none;
font-weight: 400;
}
.kkc-details dd {
margin: 0;
} .kkc-post {
max-width: 100%;
}
.kkc-post .kkc-head {
margin-bottom: 1.2em;
} @media (max-width: 1100px) {
.kkc-work .kkc-grid {
grid-template-columns: minmax(0, 1fr);
gap: 2.6em;
}
.kkc-work .kkc-side {
border-left: 0;
border-top: 1px solid rgba(0, 0, 0, .14);
padding-left: 0;
padding-top: 1.8em;
}
}
@media (max-width: 640px) {
.kkc-article {
font-size: 1.0625rem;
}
.kkc-work {
padding-inline: 16px;
}
.kkc-details .kkc-drow {
line-height: 1.9;
}
}  .kkc-article .aligncenter {
margin-left: auto;
margin-right: auto;
}
.kkc-article figure.alignleft {
float: left;
margin: .3em 1.8em 1.2em 0;
text-align: left;
}
.kkc-article figure.alignright {
float: right;
margin: .3em 0 1.2em 1.8em;
text-align: right;
}
.kkc-article figure.alignleft img,
.kkc-article figure.alignright img {
margin-inline: 0;
width: 100%;
}
.kkc-article figure.wp-block-image img,
.kkc-article div.wp-block-image > figure img {
width: 100%;
} .kkc-main::after,
.kkc-post::after,
.kkc-article::after {
content: "";
display: block;
clear: both;
} .kkc-article mark {
padding: 0 .15em;
border-radius: 2px;
}
.kkc-article strong,
.kkc-article b {
font-weight: 700;
}
@media (max-width: 640px) {
.kkc-article figure.alignleft,
.kkc-article figure.alignright {
float: none;
width: 100% !important;
margin: 1.6em 0;
text-align: center;
}
}