.posts-section{.post-item{container-name:design-card;container-type:inline-size;.post-image{--aspect-ratio:16/9;container-name:design-card-image;container-type:inline-size;display:flex;aspect-ratio:var(--aspect-ratio);background-image:linear-gradient(to right bottom,var(--color-secondary),color-mix(in oklab,var(--color-secondary) 50%,var(--color-base-100)));overflow:hidden;margin:0;a{display:block;font-size:0;flex:auto;position:relative;img{aspect-ratio:var(--aspect-ratio);width:100%;object-fit:cover;object-position:center;transition:transform 0.3s ease}.entry-meta{display:flex;align-items:center;justify-content:end;gap:var(--spacing-xs);margin:0;font-size:var(--text-s);line-height:var(--text-s--line-height);color:var(--color-base-content);background:color-mix(in oklab,var(--color-base-100) 80%,transparent);backdrop-filter:blur(7px);padding:.25em .5em;border-radius:100px;position:absolute;top:max(var(--spacing-xs), 2.5cqw);right:max(var(--spacing-xs), 2.5cqw);@container design-card-image (width < 30rem){font-size:var(--text-2xs);line-height:var(--text-2xs--line-height)}& .posted-on,& .read-time{display:flex;align-items:center;gap:var(--spacing-2xs);&::before{content:"";display:inline-block;width:1.5em;height:1.5em;mask-size:contain;mask-position:center;mask-repeat:no-repeat;background-color:currentColor;transition:transform 0.15s;margin-right:0}}& .posted-on::before{-webkit-mask-image:var(--icon-calendar);mask-image:var(--icon-calendar)}& .read-time::before{-webkit-mask-image:var(--icon-clock);mask-image:var(--icon-clock)}& .posted-on{@container design-card-image (width < 20rem){display:none}}@container design-card-image (width < 11rem){display:none}}}}.category-links{display:flex;gap:var(--spacing-s);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-xs);@container design-card (width < 25rem){display:none}& a{display:flex;align-items:center;gap:var(--spacing-2xs);color:var(--color-base-content);&::before{content:"";display:inline-block;width:1.5rem;height:1.5rem;-webkit-mask-image:var(--icon-folder);mask-image:var(--icon-folder);mask-size:contain;mask-position:center;mask-repeat:no-repeat;background-color:currentColor;transition:transform 0.15s;margin-right:0}}}& .entry-summary{margin-top:0!important;@container design-card (width < 25rem){display:none}& p{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;color:var(--color-base-content);font-size:var(--text-s);line-height:var(--text-m--line-height);margin:0;@container design-card (max-width:280px){font-size:var(--text-s);line-height:var(--text-s--line-height)}}}& .read-more{@container design-card (width < 25rem){display:none}&::after{content:"\27F6 ";margin-left:var(--spacing-xs)}}}}.posts-section.design-grid{.posts-container{container-type:inline-size;container-name:design-grid}.posts-title{font-size:var(--text-2xl);line-height:var(--text-2xl--line-height);margin-bottom:var(--spacing-2xl);color:var(--color-base-content);font-weight:600;@container design-grid (max-width:480px){font-size:var(--text-xl);line-height:var(--text-xl--line-height);margin-bottom:var(--spacing-xl)}}.posts-grid{--gap:var(--spacing-l);display:flex;flex-wrap:wrap;gap:var(--gap);margin-bottom:var(--gap)}.post-item{display:flex;width:100%;@container design-grid (width>=64rem){&.cols-4-w-4{flex:0 0 calc((100% - (3 * var(--gap))) / 4)}&.cols-4-w-3{flex:0 0 calc((100% - (2 * var(--gap))) / 3)}&.cols-4-w-2{flex:0 0 calc((100% - (1 * var(--gap))) / 2)}&.cols-4-w-1{flex:0 0 calc(100%)}}@container design-grid (48rem <=width < 64rem){&.cols-3-w-3{flex:0 0 calc((100% - (2 * var(--gap))) / 3)}&.cols-3-w-2{flex:0 0 calc((100% - (1 * var(--gap))) / 2)}&.cols-3-w-1{flex:0 0 calc(100%)}}@container design-grid (32rem <=width < 48rem){&.cols-2-w-2{flex:0 0 calc((100% - (1 * var(--gap))) / 2)}&.cols-2-w-1{flex:0 0 calc(100%)}}@container design-grid (width < 32rem){&{flex:0 0 100%}}}.inside-article{display:flex;flex-direction:column;overflow:hidden;transition:all 0.3s ease;container-name:design-card;container-type:inline-size;gap:var(--spacing-m);width:100%}.entry-header{flex-grow:1;.entry-title{margin:0;font-size:var(--text-l);line-height:var(--text-l--line-height);font-weight:600;a{text-decoration:none;color:var(--color-base-content);transition:color 0.2s ease}@container design-card (width< 25rem){font-size:var(--text-m);line-height:var(--text-m--line-height)}}}}.posts-section.design-list{.posts-container{container-type:inline-size;container-name:design-list}.posts-title{font-size:var(--text-2xl);line-height:var(--text-2xl--line-height);margin-bottom:var(--spacing-2xl);color:var(--color-base-content);font-weight:600;@container design-list (max-width:30rem){font-size:var(--text-xl);line-height:var(--text-xl--line-height);margin-bottom:var(--spacing-xl)}}.posts-grid{display:flex;flex-direction:column;gap:var(--spacing-l)}.post-item{&:last-child{border-bottom:none}}.inside-article{--gap:var(--spacing-m);display:grid;grid-template-columns:minmax(100px,30%) 1fr;grid-template-rows:auto auto auto auto;grid-template-areas:"image header" "image summary" "image category-links" "image read-more";column-gap:var(--gap);align-items:center;@container design-card (width < 35rem){--gap:var(--spacing-s)}}.post-image{grid-area:image;justify-self:stretch;height:100%;img{width:100%;height:100%;object-fit:cover;object-position:center}}.entry-header{grid-area:header;align-self:end;margin-top:var(--gap);margin-bottom:var(--gap);@container design-card (width < 35rem){grid-row:1 / 2;align-self:center}.entry-title{margin:0;font-size:var(--text-l);line-height:var(--text-l--line-height);font-weight:600;@container design-card (width < 25rem){font-size:var(--text-s);line-height:var(--text-s--line-height)}a{color:var(--color-base-content);transition:all 0.2s;&:hover,&:focus{color:color-mix(in oklab,var(--color-secondary),var(--color-base-100) 20%)}}}}.category-links{grid-area:category-links;margin-bottom:var(--gap);@container design-card (width < 45rem){display:none;grid-area:unset}}.read-more{grid-area:read-more;margin-bottom:var(--gap);display:block!important;@container design-card (width < 35rem){font-size:var(--text-s);line-height:var(--text-s--line-height);grid-row:3 / 4}}.entry-summary{grid-area:summary;margin-top:0!important;margin-bottom:var(--gap);@container design-card (width < 35rem){display:none}}}.product-category-in-post{display:flex;flex-direction:column;padding-left:var(--tnd-layout-padding);padding-right:var(--tnd-layout-padding);padding-bottom:var(--spacing-l-px);margin-bottom:var(--spacing-l-px);background:var(--color-base-200)}.taned-toc{container-name:taned-toc;container-type:inline-size;& .inside-toc{--spacing:var(--spacing-l);display:flex;flex-direction:column;gap:var(--spacing);background:linear-gradient(140deg,var(--color-base-200) 40%,var(--color-base-300) 60%);border-left:var(--border-radius) solid var(--color-secondary);border-radius:var(--border-radius);padding:var(--spacing);margin-left:var(--spacing-l);margin-right:var(--spacing-l);margin-bottom:var(--spacing-l);& ul{list-style:none}&>ul{margin:0}&>ul ul{font-size:max(0.95em, var(--text-xs));margin-left:var(--spacing)}}& .title-toc{margin:0}& a{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing);padding:var(--spacing-2xs) 0;color:inherit;border-bottom:1px solid var(--color-base-600);&:after{content:attr(data-order);font-size:var(--text-m)}}@container taned-toc (max-width:30rem){.inside-toc{--spacing:var(--spacing-s);font-size:var(--text-s);margin-left:0;margin-right:0}}}