/* ============================================
   BLOG26 COMPONENT STYLES
   ============================================ */

/* --------------------------------------------
   1. CARD BASE STYLES
   -------------------------------------------- */

/* Base Card Styling */
.content-blog-card,
.content-blog-list {
  border-radius: var(--settings-card-blog-radius);
  box-shadow: var(--settings-card-blog-shadow);
}

/* Card Layout Variants */
.content-blog-list {
  flex-direction: row;
}

.content-blog-list .card-img {
  width: 33.6666666%;
}

.content-blog-list .card-body {
  width: 66.3333333%;
}

[class*="content-blog"] picture,
[class*="content-blog"] img,
[class*="content-blog"] .video-wrapper,
[class*="content-blog"] video {
  height: 100%;
}

/* --------------------------------------------
   2. SPACING SYSTEM
   -------------------------------------------- */

/* Large Sections (2x gutter) */
.blog-header,
.blog-text,
.blog-image,
.blog-video,
.blog-body,
.blog-share,
.author-header,
.blog-view-menu,
.blog-detail-header,
.blog-content-text,
.blog-content-image,
.blog-content-video  {
  margin-bottom: calc(var(--bs-gutter-y) * 2);
}

/* Medium Sections (1.5x gutter) */
.blog-nav {
  margin-bottom: calc(var(--bs-gutter-y) * 1.5);
}

.author-bio {
  text-align: center;
  margin-bottom: calc(var(--bs-gutter-y) * 1.5);
}

.blog-social-links {
  justify-content: center;
  display: flex;
  gap: 0.75rem;
  margin-bottom: calc(var(--bs-gutter-y) * 1.5);
}

/* Standard Sections (1x gutter) */
.blog-card-item,
.blog-card-short-item,
.blog-list-item,
.blog-list-short-item,
.blog-card-short-view .blog-card-title,
.blog-name,
h3.blog-card-title {
  margin-bottom: var(--bs-gutter-y);
}

h3.blog-card-title {
  margin-bottom: calc(var(--bs-gutter-y) * 1);
}

/* Small Sections (0.75x gutter) */
.content-blog-list .card-text {
  margin-bottom: calc(var(--bs-gutter-y) * .75);
}

/* Minimal Sections (0.5x gutter) */
.blog-title,
.blog-card-title,
.blog-card-subtitle,
.card-text,
.blog-function {
  margin-bottom: calc(var(--bs-gutter-y) * .5);
}

/* Zero Margin Exceptions */
.blog-autor-container .blog-tags-container {
  margin-bottom: 0;
}


/* --------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------- */

/* Links */
.blog-card-title a {
  color: var(--bs-body-color);
  text-decoration: none;
}

.blog-category a,
.blog-category a:hover,
.blog-card-title a:hover {
  text-decoration: none;
}

/* Font Weights */
.blog-author-name {
  font-weight: var(--bs-font-weight-bold);
}

/* Small Text Elements */
.blog-date,
.blog-tag,
.blog-autor,
.blog-readtime {
  font-size: var(--bs-font-size-extra-small);
  line-height: var(--bs-line-height-extra-small);
}

/* Muted Colors */
.blog-date,
.blog-date a,
.blog-tag,
a.blog-tag,
.blog-readtime,
.blog-readtime a {
  text-decoration: none;
  color: hsl(from var(--bs-body-color) h s l / .5);
}

/* Text Alignment */
.blog-function,
.blog-name {
  text-align: center;
}

.blog-detail-view .blog-readtime {
  text-align: right;
}

.blog-detail-view .blog-category {
  text-align: center;
}

/* --------------------------------------------
   4. TEXT TRUNCATION
   -------------------------------------------- */

/* Card Text Truncation */
.content-blog-card .card-text {
  color: hsl(from var(--bs-body-color) h s l / .6);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.content-blog-list .card-text {
  color: hsl(from var(--bs-body-color) h s l / .6);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* --------------------------------------------
   5. IMAGES
   -------------------------------------------- */

.blog-card-item [class*="card-img"] .image-item,
.blog-card-item [class*="card-img"] .image-item img,
.blog-card-item [class*="card-img"] .video-wrapper,
.blog-card-item [class*="card-img"] .video-wrapper video {
  aspect-ratio: var(--settings-card-blog-ratio);
}

.blog-detail-view .image-item,
.blog-detail-view video {
  border-radius: var(--settings-image-blog-radius);
}

.blog-detail-view .image-item {
  aspect-ratio: var(--settings-image-blog-ratio); 
}

.blog-image-gallery {
  padding-left: 8.333333%;
  padding-right: 8.333333%;
}

/* --------------------------------------------
   6. META INFORMATION (Date, Tags, Readtime)
   -------------------------------------------- */

/* Date Alignment */
.blog-date {
  margin-left: auto;
}

/* Tags Container */
.blog-tags-container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 0.5rem;
  margin-bottom: var(--bs-gutter-y);
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.blog-tags-container::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* Individual Tag Style */
.blog-tag {
  border: 1px solid hsl(from var(--bs-body-color) h s l / .2);
  border-radius: .25rem;
  padding: .1875rem .375rem;
  white-space: nowrap;
}

a.blog-tag:hover {
  background-color: hsl(from var(--bs-body-color) h s l / .02);
}

/* Readtime */
.blog-readtime {
  white-space: nowrap;
  flex-shrink: 0;
}

.read-time-icon svg {
  height: .875rem;
  width: .875rem;
  stroke-width: 0.125rem;
  vertical-align: -0.125em;
}

/* --------------------------------------------
   7. AUTHOR COMPONENT
   -------------------------------------------- */

/* Author Container */
.blog-autor-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.blog-detail-view .blog-autor-container {
  justify-content: space-between;
}

/* Avatar Container */
.blog-avatar-container {
  display: flex;
  align-items: center;
  flex-grow: 1;
}

.blog-detail-view .blog-avatar-container {
  flex-grow: 0;
}

.blog-autor-container a {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  color: var(--bs-body-color);
}

/* Avatar */
.blog-avatar {
  width: 2.25rem;
  flex-shrink: 0;
  margin-right: .75rem;
}

.blog-avatar img {
  border-radius: 50rem;
  height: 100%;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Author Info */
.blog-autor {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.blog-autor li {
  list-style: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blog-autor a {
  color: var(--bs-body-color);
}

/* Author Header Variant */
.author-header {
  border-bottom: 1px solid var(--bs-border-hr);
}

.author-header .blog-avatar {
  width: 15rem;
  padding: 0 var(--bs-gutter-x);
  margin: 0 auto;
  margin-bottom: var(--bs-gutter-y);
}

.blog-video-card::after {
  content: "video";
  position: absolute;
  top: .75rem;
  right: .75rem;
  font-size: .625rem;
  line-height: 1;
  background-color: hsl(from var(--bs-overlay-black) h s l / .5);
  color: var(--bs-overlay-white);
  padding: .25rem .5rem;
  border-radius: 2rem;
  text-transform: uppercase;
}

.istopblog .card {
  outline: 4px solid hsl(from var(--bs-primary-base) h s l / .25);
}

/* --------------------------------------------
   8. SHARE COMPONENT
   -------------------------------------------- */

.blog-share {
  padding: var(--bs-gutter-y) 0;
  border-top: 1px solid var(--bs-border-hr);
}

.blog-share-header {
  margin-bottom: 1rem;
}

.share-title {
  text-align: center;
}

.blog-share-grid {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}

.share-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  aspect-ratio: 1;
  padding: 0;
  position: relative;
  margin-right: 0;
}

/* Copy Notification */
.copy-notification {
  display: none;
  width: fit-content;
  position: absolute;
  top: -1rem;
  left: 1.5rem;
}

.copy-notification.show {
  display: inline-flex;
}

.copy-notification svg {
  flex-shrink: 0;
}

/* --------------------------------------------
   9. FOOTER & PAGINATION
   -------------------------------------------- */

.blog-footer-container {
  margin-top: auto;
}

.blog-pagination nav ul,
.blog-view-list .blog-nav ul {
  justify-content: center;
}

.blog-pagination nav ul {
  margin-bottom: calc(var(--bs-gutter-y) * 2);
}

/* --------------------------------------------
   10. ACCESSIBILITY
   -------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* --------------------------------------------
   11. BLOG CONTENT GALLERY
   -------------------------------------------- */

/* Gallery Layout */
.blog-image-gallery.columns-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.blog-image-gallery .gallery-item {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--bs-border-radius, 0.375rem);
}

.blog-image-gallery .gallery-item:hover {
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

/* ============================================
   RESPONSIVE LAYOUT PATTERNS
   Container-query based alternating layouts
   Grouped by breakpoint for correct cascade
   ============================================ */

/* --------------------------------------------
   PATTERN MIXIN LOGIC
   -------------------------------------------- */

/*
  Pattern Naming Convention:
  - pattern-{breakpoint}-{sequence}
  - Breakpoints: xs(320), sm(440), md(768), lg(1024), xl(1200), xxl(1480)
  - Sequences: 84, 48, 57, 75, 336, 633, 246, 642
  
  Layout Types:
  - Horizontal (8-4, 4-8): 66.67% / 33.33% split
  - Balanced (5-7, 7-5): 50% / 50% split
  - Complex patterns: 3-3-6, 6-3-3, 2-4-6, 6-4-2
  
  Pattern Descriptions:
  - 84: Large Image Left (8-4 ⇄ 4-8) → Cards 1,4,5,8,9... horizontal | 2,3,6,7,10... stacked
  - 48: Large Image Right (4-8 ⇄ 8-4) → Cards 2,3,6,7,10... horizontal | 1,4,5,8,9... stacked
  - 57: Balanced Right (5-7 ⇄ 7-5) → Cards 2,3,6,7,10... horizontal | 1,4,5,8,9... stacked
  - 75: Balanced Left (7-5 ⇄ 5-7) → Cards 1,4,5,8,9... horizontal | 2,3,6,7,10... stacked
  - 336: Complex (3-3-6 ⇄ 6-3-3) → Cards 3,4,9,10,15,16... horizontal | others stacked
  - 633: Complex (6-3-3 ⇄ 3-3-6) → Cards 1,4,7,10,13,16... horizontal | others stacked
  - 246: Complex (2-4-6 ⇄ 6-4-2) → Cards 3,4,9,10,15,16... horizontal | others stacked
  - 642: Complex (6-4-2 ⇄ 2-4-6) → Cards 1,4,7,10,13,16... horizontal | others stacked
*/

/* --------------------------------------------
   XS BREAKPOINT (320px)
   -------------------------------------------- */

@container (min-width: 320px) {
  /* Pattern 84: Large Image Left */
  [class*="pattern-xs-84"] > :is(*:nth-child(4n+1), *:nth-child(4n)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 66.66666667%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 33.33333333%; }
  }
  [class*="pattern-xs-84"] > :is(*:nth-child(4n+2), *:nth-child(4n+3)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }

  /* Pattern 48: Large Image Right */
  [class*="pattern-xs-48"] > :is(*:nth-child(4n+2), *:nth-child(4n+3)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 66.66666667%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 33.33333333%; }
  }
  [class*="pattern-xs-48"] > :is(*:nth-child(4n+1), *:nth-child(4n)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }

  /* Pattern 57: Balanced Right */
  [class*="pattern-xs-57"] > :is(*:nth-child(4n+2), *:nth-child(4n+3)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 50%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 50%; }
    .card-text { -webkit-line-clamp: 8; }
  }
  [class*="pattern-xs-57"] > :is(*:nth-child(4n+1), *:nth-child(4n)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }

  /* Pattern 75: Balanced Left */
  [class*="pattern-xs-75"] > :is(*:nth-child(4n+1), *:nth-child(4n)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 50%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 50%; }
    .card-text { -webkit-line-clamp: 8; }
  }
  [class*="pattern-xs-75"] > :is(*:nth-child(4n+2), *:nth-child(4n+3)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }

  /* Pattern 336: Complex 3-3-6 */
  [class*="pattern-xs-336"] > :is(*:nth-child(6n+3), *:nth-child(6n+4)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 50%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 50%; }
    .card-text { -webkit-line-clamp: 8; }
  }
  [class*="pattern-xs-336"] > :is(*:nth-child(6n+1), *:nth-child(6n+2), *:nth-child(6n+5), *:nth-child(6n)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }

  /* Pattern 633: Complex 6-3-3 */
  [class*="pattern-xs-633"] > :is(*:nth-child(6n+1), *:nth-child(6n+4)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 50%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 50%; }
    .card-text { -webkit-line-clamp: 8; }
  }
  [class*="pattern-xs-633"] > :is(*:nth-child(6n+2), *:nth-child(6n+3), *:nth-child(6n+5), *:nth-child(6n)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }

  /* Pattern 246: Complex 2-4-6 */
  [class*="pattern-xs-246"] > :is(*:nth-child(6n+3), *:nth-child(6n+4)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 50%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 50%; }
    .card-text { -webkit-line-clamp: 8; }
  }
  [class*="pattern-xs-246"] > :is(*:nth-child(6n+1), *:nth-child(6n+2), *:nth-child(6n+5), *:nth-child(6n)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }

  /* Pattern 642: Complex 6-4-2 */
  [class*="pattern-xs-642"] > :is(*:nth-child(6n+1), *:nth-child(6n+4)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 50%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 50%; }
    .card-text { -webkit-line-clamp: 8; }
  }
  [class*="pattern-xs-642"] > :is(*:nth-child(6n+2), *:nth-child(6n+3), *:nth-child(6n+5), *:nth-child(6n)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }
}

/* --------------------------------------------
   SM BREAKPOINT (440px)
   -------------------------------------------- */

@container (min-width: 440px) {
  /* Pattern 84: Large Image Left */
  [class*="pattern-sm-84"] > :is(*:nth-child(4n+1), *:nth-child(4n)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 66.66666667%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 33.33333333%; }
  }
  [class*="pattern-sm-84"] > :is(*:nth-child(4n+2), *:nth-child(4n+3)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }

  /* Pattern 48: Large Image Right */
  [class*="pattern-sm-48"] > :is(*:nth-child(4n+2), *:nth-child(4n+3)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 66.66666667%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 33.33333333%; }
  }
  [class*="pattern-sm-48"] > :is(*:nth-child(4n+1), *:nth-child(4n)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }

  /* Pattern 57: Balanced Right */
  [class*="pattern-sm-57"] > :is(*:nth-child(4n+2), *:nth-child(4n+3)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 50%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 50%; }
    .card-text { -webkit-line-clamp: 8; }
  }
  [class*="pattern-sm-57"] > :is(*:nth-child(4n+1), *:nth-child(4n)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }

  /* Pattern 75: Balanced Left */
  [class*="pattern-sm-75"] > :is(*:nth-child(4n+1), *:nth-child(4n)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 50%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 50%; }
    .card-text { -webkit-line-clamp: 8; }
  }
  [class*="pattern-sm-75"] > :is(*:nth-child(4n+2), *:nth-child(4n+3)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }

  /* Pattern 336: Complex 3-3-6 */
  [class*="pattern-sm-336"] > :is(*:nth-child(6n+3), *:nth-child(6n+4)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 50%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 50%; }
    .card-text { -webkit-line-clamp: 8; }
  }
  [class*="pattern-sm-336"] > :is(*:nth-child(6n+1), *:nth-child(6n+2), *:nth-child(6n+5), *:nth-child(6n)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }

  /* Pattern 633: Complex 6-3-3 */
  [class*="pattern-sm-633"] > :is(*:nth-child(6n+1), *:nth-child(6n+4)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 50%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 50%; }
    .card-text { -webkit-line-clamp: 8; }
  }
  [class*="pattern-sm-633"] > :is(*:nth-child(6n+2), *:nth-child(6n+3), *:nth-child(6n+5), *:nth-child(6n)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }

  /* Pattern 246: Complex 2-4-6 */
  [class*="pattern-sm-246"] > :is(*:nth-child(6n+3), *:nth-child(6n+4)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 50%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 50%; }
    .card-text { -webkit-line-clamp: 8; }
  }
  [class*="pattern-sm-246"] > :is(*:nth-child(6n+1), *:nth-child(6n+2), *:nth-child(6n+5), *:nth-child(6n)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }

  /* Pattern 642: Complex 6-4-2 */
  [class*="pattern-sm-642"] > :is(*:nth-child(6n+1), *:nth-child(6n+4)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 50%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 50%; }
    .card-text { -webkit-line-clamp: 8; }
  }
  [class*="pattern-sm-642"] > :is(*:nth-child(6n+2), *:nth-child(6n+3), *:nth-child(6n+5), *:nth-child(6n)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }
}

/* --------------------------------------------
   MD BREAKPOINT (768px)
   -------------------------------------------- */

@container (min-width: 768px) {
  /* Pattern 84: Large Image Left */
  [class*="pattern-md-84"] > :is(*:nth-child(4n+1), *:nth-child(4n)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 66.66666667%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 33.33333333%; }
  }
  [class*="pattern-md-84"] > :is(*:nth-child(4n+2), *:nth-child(4n+3)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }

  /* Pattern 48: Large Image Right */
  [class*="pattern-md-48"] > :is(*:nth-child(4n+2), *:nth-child(4n+3)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 66.66666667%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 33.33333333%; }
  }
  [class*="pattern-md-48"] > :is(*:nth-child(4n+1), *:nth-child(4n)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }

  /* Pattern 57: Balanced Right */
  [class*="pattern-md-57"] > :is(*:nth-child(4n+2), *:nth-child(4n+3)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 50%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 50%; }
    .card-text { -webkit-line-clamp: 8; }
  }
  [class*="pattern-md-57"] > :is(*:nth-child(4n+1), *:nth-child(4n)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }

  /* Pattern 75: Balanced Left */
  [class*="pattern-md-75"] > :is(*:nth-child(4n+1), *:nth-child(4n)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 50%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 50%; }
    .card-text { -webkit-line-clamp: 8; }
  }
  [class*="pattern-md-75"] > :is(*:nth-child(4n+2), *:nth-child(4n+3)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }

  /* Pattern 336: Complex 3-3-6 */
  [class*="pattern-md-336"] > :is(*:nth-child(6n+3), *:nth-child(6n+4)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 50%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 50%; }
    .card-text { -webkit-line-clamp: 8; }
  }
  [class*="pattern-md-336"] > :is(*:nth-child(6n+1), *:nth-child(6n+2), *:nth-child(6n+5), *:nth-child(6n)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }

  /* Pattern 633: Complex 6-3-3 */
  [class*="pattern-md-633"] > :is(*:nth-child(6n+1), *:nth-child(6n+4)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 50%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 50%; }
    .card-text { -webkit-line-clamp: 8; }
  }
  [class*="pattern-md-633"] > :is(*:nth-child(6n+2), *:nth-child(6n+3), *:nth-child(6n+5), *:nth-child(6n)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }

  /* Pattern 246: Complex 2-4-6 */
  [class*="pattern-md-246"] > :is(*:nth-child(6n+3), *:nth-child(6n+4)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 50%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 50%; }
    .card-text { -webkit-line-clamp: 8; }
  }
  [class*="pattern-md-246"] > :is(*:nth-child(6n+1), *:nth-child(6n+2), *:nth-child(6n+5), *:nth-child(6n)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }

  /* Pattern 642: Complex 6-4-2 */
  [class*="pattern-md-642"] > :is(*:nth-child(6n+1), *:nth-child(6n+4)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 50%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 50%; }
    .card-text { -webkit-line-clamp: 8; }
  }
  [class*="pattern-md-642"] > :is(*:nth-child(6n+2), *:nth-child(6n+3), *:nth-child(6n+5), *:nth-child(6n)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }
}

/* --------------------------------------------
   LG BREAKPOINT (1024px)
   -------------------------------------------- */

@container (min-width: 1024px) {
  /* Pattern 84: Large Image Left */
  [class*="pattern-lg-84"] > :is(*:nth-child(4n+1), *:nth-child(4n)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 66.66666667%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 33.33333333%; }
  }
  [class*="pattern-lg-84"] > :is(*:nth-child(4n+2), *:nth-child(4n+3)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }

  /* Pattern 48: Large Image Right */
  [class*="pattern-lg-48"] > :is(*:nth-child(4n+2), *:nth-child(4n+3)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 66.66666667%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 33.33333333%; }
  }
  [class*="pattern-lg-48"] > :is(*:nth-child(4n+1), *:nth-child(4n)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }

  /* Pattern 57: Balanced Right */
  [class*="pattern-lg-57"] > :is(*:nth-child(4n+2), *:nth-child(4n+3)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 50%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 50%; }
    .card-text { -webkit-line-clamp: 8; }
  }
  [class*="pattern-lg-57"] > :is(*:nth-child(4n+1), *:nth-child(4n)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }

  /* Pattern 75: Balanced Left */
  [class*="pattern-lg-75"] > :is(*:nth-child(4n+1), *:nth-child(4n)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 50%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 50%; }
    .card-text { -webkit-line-clamp: 8; }
  }
  [class*="pattern-lg-75"] > :is(*:nth-child(4n+2), *:nth-child(4n+3)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }

  /* Pattern 336: Complex 3-3-6 */
  [class*="pattern-lg-336"] > :is(*:nth-child(6n+3), *:nth-child(6n+4)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 50%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 50%; }
    .card-text { -webkit-line-clamp: 8; }
  }
  [class*="pattern-lg-336"] > :is(*:nth-child(6n+1), *:nth-child(6n+2), *:nth-child(6n+5), *:nth-child(6n)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }

  /* Pattern 633: Complex 6-3-3 */
  [class*="pattern-lg-633"] > :is(*:nth-child(6n+1), *:nth-child(6n+4)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 50%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 50%; }
    .card-text { -webkit-line-clamp: 8; }
  }
  [class*="pattern-lg-633"] > :is(*:nth-child(6n+2), *:nth-child(6n+3), *:nth-child(6n+5), *:nth-child(6n)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }

  /* Pattern 246: Complex 2-4-6 */
  [class*="pattern-lg-246"] > :is(*:nth-child(6n+3), *:nth-child(6n+4)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 50%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 50%; }
    .card-text { -webkit-line-clamp: 8; }
  }
  [class*="pattern-lg-246"] > :is(*:nth-child(6n+1), *:nth-child(6n+2), *:nth-child(6n+5), *:nth-child(6n)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }

  /* Pattern 642: Complex 6-4-2 */
  [class*="pattern-lg-642"] > :is(*:nth-child(6n+1), *:nth-child(6n+4)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 50%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 50%; }
    .card-text { -webkit-line-clamp: 8; }
  }
  [class*="pattern-lg-642"] > :is(*:nth-child(6n+2), *:nth-child(6n+3), *:nth-child(6n+5), *:nth-child(6n)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }
}

/* --------------------------------------------
   XL BREAKPOINT (1200px)
   -------------------------------------------- */

@container (min-width: 1200px) {
  /* Pattern 84: Large Image Left */
  [class*="pattern-xl-84"] > :is(*:nth-child(4n+1), *:nth-child(4n)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 66.66666667%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 33.33333333%; }
  }
  [class*="pattern-xl-84"] > :is(*:nth-child(4n+2), *:nth-child(4n+3)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }

  /* Pattern 48: Large Image Right */
  [class*="pattern-xl-48"] > :is(*:nth-child(4n+2), *:nth-child(4n+3)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 66.66666667%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 33.33333333%; }
  }
  [class*="pattern-xl-48"] > :is(*:nth-child(4n+1), *:nth-child(4n)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }

  /* Pattern 57: Balanced Right */
  [class*="pattern-xl-57"] > :is(*:nth-child(4n+2), *:nth-child(4n+3)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 50%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 50%; }
    .card-text { -webkit-line-clamp: 8; }
  }
  [class*="pattern-xl-57"] > :is(*:nth-child(4n+1), *:nth-child(4n)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }

  /* Pattern 75: Balanced Left */
  [class*="pattern-xl-75"] > :is(*:nth-child(4n+1), *:nth-child(4n)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 50%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 50%; }
    .card-text { -webkit-line-clamp: 8; }
  }
  [class*="pattern-xl-75"] > :is(*:nth-child(4n+2), *:nth-child(4n+3)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }

  /* Pattern 336: Complex 3-3-6 */
  [class*="pattern-xl-336"] > :is(*:nth-child(6n+3), *:nth-child(6n+4)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 50%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 50%; }
    .card-text { -webkit-line-clamp: 8; }
  }
  [class*="pattern-xl-336"] > :is(*:nth-child(6n+1), *:nth-child(6n+2), *:nth-child(6n+5), *:nth-child(6n)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }

  /* Pattern 633: Complex 6-3-3 */
  [class*="pattern-xl-633"] > :is(*:nth-child(6n+1), *:nth-child(6n+4)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 50%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 50%; }
    .card-text { -webkit-line-clamp: 8; }
  }
  [class*="pattern-xl-633"] > :is(*:nth-child(6n+2), *:nth-child(6n+3), *:nth-child(6n+5), *:nth-child(6n)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }

  /* Pattern 246: Complex 2-4-6 */
  [class*="pattern-xl-246"] > :is(*:nth-child(6n+3), *:nth-child(6n+4)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 50%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 50%; }
    .card-text { -webkit-line-clamp: 8; }
  }
  [class*="pattern-xl-246"] > :is(*:nth-child(6n+1), *:nth-child(6n+2), *:nth-child(6n+5), *:nth-child(6n)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }

  /* Pattern 642: Complex 6-4-2 */
  [class*="pattern-xl-642"] > :is(*:nth-child(6n+1), *:nth-child(6n+4)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 50%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 50%; }
    .card-text { -webkit-line-clamp: 8; }
  }
  [class*="pattern-xl-642"] > :is(*:nth-child(6n+2), *:nth-child(6n+3), *:nth-child(6n+5), *:nth-child(6n)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }
}

/* --------------------------------------------
   XXL BREAKPOINT (1480px)
   -------------------------------------------- */

@container (min-width: 1480px) {
  /* Pattern 84: Large Image Left */
  [class*="pattern-xxl-84"] > :is(*:nth-child(4n+1), *:nth-child(4n)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 66.66666667%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 33.33333333%; }
  }
  [class*="pattern-xxl-84"] > :is(*:nth-child(4n+2), *:nth-child(4n+3)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }

  /* Pattern 48: Large Image Right */
  [class*="pattern-xxl-48"] > :is(*:nth-child(4n+2), *:nth-child(4n+3)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 66.66666667%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 33.33333333%; }
  }
  [class*="pattern-xxl-48"] > :is(*:nth-child(4n+1), *:nth-child(4n)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }

  /* Pattern 57: Balanced Right */
  [class*="pattern-xxl-57"] > :is(*:nth-child(4n+2), *:nth-child(4n+3)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 50%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 50%; }
    .card-text { -webkit-line-clamp: 8; }
  }
  [class*="pattern-xxl-57"] > :is(*:nth-child(4n+1), *:nth-child(4n)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }

  /* Pattern 75: Balanced Left */
  [class*="pattern-xxl-75"] > :is(*:nth-child(4n+1), *:nth-child(4n)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 50%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 50%; }
    .card-text { -webkit-line-clamp: 8; }
  }
  [class*="pattern-xxl-75"] > :is(*:nth-child(4n+2), *:nth-child(4n+3)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }

  /* Pattern 336: Complex 3-3-6 */
  [class*="pattern-xxl-336"] > :is(*:nth-child(6n+3), *:nth-child(6n+4)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 50%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 50%; }
    .card-text { -webkit-line-clamp: 8; }
  }
  [class*="pattern-xxl-336"] > :is(*:nth-child(6n+1), *:nth-child(6n+2), *:nth-child(6n+5), *:nth-child(6n)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }

  /* Pattern 633: Complex 6-3-3 */
  [class*="pattern-xxl-633"] > :is(*:nth-child(6n+1), *:nth-child(6n+4)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 50%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 50%; }
    .card-text { -webkit-line-clamp: 8; }
  }
  [class*="pattern-xxl-633"] > :is(*:nth-child(6n+2), *:nth-child(6n+3), *:nth-child(6n+5), *:nth-child(6n)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }

  /* Pattern 246: Complex 2-4-6 */
  [class*="pattern-xxl-246"] > :is(*:nth-child(6n+3), *:nth-child(6n+4)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 50%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 50%; }
    .card-text { -webkit-line-clamp: 8; }
  }
  [class*="pattern-xxl-246"] > :is(*:nth-child(6n+1), *:nth-child(6n+2), *:nth-child(6n+5), *:nth-child(6n)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }

  /* Pattern 642: Complex 6-4-2 */
  [class*="pattern-xxl-642"] > :is(*:nth-child(6n+1), *:nth-child(6n+4)) {
    .card { flex-direction: row-reverse; }
    .card-img {
      width: 50%;
      :is(.image-item, img) { height: 100%; }
    }
    .card-body { width: 50%; }
    .card-text { -webkit-line-clamp: 8; }
  }
  [class*="pattern-xxl-642"] > :is(*:nth-child(6n+2), *:nth-child(6n+3), *:nth-child(6n+5), *:nth-child(6n)) {
    .card { flex-direction: column; }
    .card-img { width: 100%; }
    .card-body { width: 100%; }
  }
}