.tlg-post-grid-wrap {
  margin: 0 auto;
}
.tlg-post-grid-heading {
  font-size: clamp(28px, 5vw, 64px);
  line-height: 1.1;
  margin: 0 0 28px;
}
.tlg-post-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 36px);
}
.tlg-card {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
}
@media (max-width: 1024px) {
  .tlg-card {
    grid-column: span 6;
  }
}
@media (max-width: 640px) {
  .tlg-card {
    grid-column: span 12;
    margin-bottom: 40px;
  }
}
.tlg-card-media {
  display: block;
  overflow: hidden;
}
.tlg-card-media img {
  width: 100%;
  height: 240px;
  display: block;
  transition: transform 0.35s ease;
  object-fit: cover;
}
.tlg-card-media:hover img {
  transform: scale(1.02);
}
.tlg-card-meta {
  display: flex;
  gap: 18px;
  align-items: center;
  margin: 18px 0 6px;
  font-size: 14px;
}
.tlg-card-tag {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--Colour-Brand-Vibrant-Red, #d80132);
  font-size: 14px;
  font-weight: 400;
  line-height: 125%;
}
.tlg-card-reading {
  font-size: 14px;
  font-weight: 400;
  line-height: 125%;
}
.tlg-card-title {
  font-size: 24px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.96px;
  margin-top: 16px;
}
.tlg-card-title a {
  text-decoration: none;
  color: inherit;
}
.tlg-card-excerpt {
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
}
.tlg-card-readmore {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  color: #000 !important;
  font-family: "DM Sans";
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: -0.36px;
}
.tlg-card-readmore span {
  font-size: 0;
  color: transparent;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M9.38721 6.67285C9.48803 6.67285 9.56501 6.70326 9.64307 6.78125L14.5874 11.7256C14.6413 11.7795 14.6665 11.8215 14.6782 11.8496V11.8506C14.693 11.8861 14.7017 11.9259 14.7017 12.0233C14.7017 12.0736 14.686 12.1194 14.6637 12.1623C14.6508 12.1869 14.627 12.2255 14.5874 12.2236L9.61865 17.1924C9.54088 17.2702 9.47374 17.292 9.39307 17.2891C9.29904 17.2856 9.21818 17.2537 9.13232 17.168C9.0542 17.0898 9.02295 17.013 9.02295 16.9121C9.02295 16.8112 9.0542 16.7344 9.13232 16.6562L13.814 11.9746L9.10693 7.26758C9.02927 7.18988 9.00733 7.12357 9.01025 7.04297C9.0137 6.9487 9.04627 6.86731 9.13232 6.78125C9.21025 6.70344 9.28662 6.67293 9.38721 6.67285Z" fill="black" stroke="black"/></svg>')
    no-repeat 50% 50%/24px 24px;
  width: 24px;
  height: 24px;
  display: inline-block;
  margin-left: 8px;
}
.darkmode .tlg-card-tag {
  border-color: rgba(255, 255, 255, 0.5);
}
.darkmode .tlg-card-reading {
  opacity: 0.9;
}

.tlg-archive-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
}
.tlg-archive-chip {
    padding: 8px 16px;
    color: var(--Text-primary, #000);
    /* Paragraph/S */
    font-family: "DM Sans";
    font-size: var(--Typography-Size-Text-S, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: 125%; /* 17.5px */
    border:none;
}
.tlg-archive-chip.is-active {
    border: 1px solid var(--Colour-Brand-Vibrant-Red, #D80132);
}
.tlg-archive-actions {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 16px;
    margin-top: 40px;
}
.tlg-archive-loadmore {
  appearance: none;
  border: 1px solid #000;
  background: #000;
  color: #fff;
  padding: 12px 18px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 6px;
}
.tlg-archive-status {
  font-size: 14px;
  opacity: 0.8;
}
.tlg-archive-filter-header {
    color: var(--Text-primary, #000);

    /* Heading/H5 */
    font-family: "DM Sans";
    font-size: var(--Typography-Size-H5, 20px);
    font-style: normal;
    font-weight: 400;
    line-height: 125%; /* 25px */
    letter-spacing: -0.8px;
    margin-bottom: 16px;
}

/* Add this at the end of your CSS file */
@media (max-width: 767px) {
    .tlg-post-grid .tlg-card:nth-child(n+4) {
      display: none;
    }
    
    .tlg-post-grid.tlg-loaded .tlg-card:nth-child(n+4) {
      display: flex;
    }
  }