.grid--articles {
  container: articleGrid / inline-size;
  --grid-column-count: 3;
  --grid-column-width: auto;
  --grid-position-span-full: 1 / -1;
  --grid-position-span-half: span calc(var(--grid-column-count) / 2);
  --grid-position-span-1: span 1;
  --grid-position-span-2: span 2;
  --grid-position-span-3: span 3;
  --grid-position-span-auto: auto;

  .grid__group {
    display: grid;
    gap: 0.5rem;
    grid-auto-rows: auto;
    grid-template-columns: repeat(var(--grid-column-count), minmax(var(--container-xs), var(--grid-column-width)));
    margin-bottom: 1rem;
    grid-auto-flow: row;

    /* Grid Groups with Featured Articles - Refer to Figma Doc for patterns */
    &.grid__group--featured {
      --grid-column-count: 4;

      &.grid__group--featured--1 {
        &:has(> :first-child.card--article--featured), &:has(> :last-child.card--article--featured) {
          /* FP1 - A */
          .card--article {
            grid-column: var(--grid-position-span-half);
            &.card--article--featured {
              grid-column: var(--grid-position-span-full);
            }
          }
        }

        &:has(> .card--article:nth-child(2):last-child) {
          /* FP1 - B */
          .card--article {
            grid-column: var(--grid-position-span-1);
            grid-row:var(--grid-position-span-2);

            &.card--article--featured {
              grid-column: var(--grid-position-span-3);
            }
          }
        }

        &:not(:has(> :first-child.card--article--featured)):not(:has(> :last-child.card--article--featured)) {
          /* FP1 - C */
          .card--article {
            &:first-child, &:last-child {
              grid-column: var(--grid-position-span-1);
              grid-row: var(--grid-position-span-2);
            }

            &.card--article--featured {
              grid-column: var(--grid-position-span-2);
              grid-row: var(--grid-position-span-2);
            }
          }
        }

        &:has(> .card--article:nth-child(1):last-child) {
          /* FP1 - D */
          .card--article--featured {
            grid-column: var(--grid-position-span-full);
          }
        }
      }

      &.grid__group--featured--2 {
        &:has(> .card--article:last-child:not(.card--article--featured)) {
          /* FP2 - A */
          .card--article--0 {
            grid-column: var(--grid-position-span-full);
          }

          .card--article--1 {
            grid-column: var(--grid-position-span-3);
          }

          .card--article--2 {
            grid-column: var(--grid-position-span-1);
          }
        }

        &:has(> .card--article:first-child:not(.card--article--featured)) {
          /* FP2 - B */
          .card--article--0 {
            grid-column: var(--grid-position-span-1);
            grid-row: var(--grid-position-span-2);
          }

          .card--article--1 {
            grid-column: var(--grid-position-span-3);
            grid-row: var(--grid-position-span-1);
          }

          .card--article--2 {
            grid-column: var(--grid-position-span-3);
            grid-row: var(--grid-position-span-1);
          }
        }

        &:has(> .card--article:first-child.card--article--featured):has(> .card--article:last-child.card--article--featured) {
          /* FP2 - C */
          .card--article--0 {
            grid-column: var(--grid-position-span-3);
          }

          .card--article--1 {
            grid-column: var(--grid-position-span-1);
          }

          .card--article--2 {
            grid-column: var(--grid-position-span-full);
          }

          &:has(> .card--article:nth-child(2):last-child) {
            /* FP2 - D */
            .card--article--featured {
              grid-area: var(--grid-position-span-auto);
              grid-column: var(--grid-position-span-full);
            }
          }
        }
      }

      &.grid__group--featured--3 {
        /* FP3 - A */
        .card--article {
          grid-column: var(--grid-position-span-full);
        }
      }
    }

    /* Grid Groups without Featured Articles - Refer to Figma Doc for patterns */
    &.grid__group--1, &.grid__group--2 , &.grid__group--3 {
      --grid-column-width: calc((100% - 1rem) / 3);
    }

    &.grid__group--1 {
      .card--article--0 {
        grid-area: 1 / 1 / 3 / 2;
      }
      .card--article--1 {
        grid-area: 1 / 2 / 2 / 4;
      }
      .card--article--2 {
        grid-area: 2 / 2 / 3 / 4;
      }
    }

    &.grid__group--2 {
      .card--article--0 {
        grid-area: 1 / 1 / 2 / 3;
      }

      .card--article--1 {
        grid-area: 1 / 3 / 3 / 4;
      }

      .card--article--2 {
        grid-area: 2 / 1 / 3 / 3;
      }
    }

    &.grid__group--3 .card--article {
      grid-column: var(--grid-position-span-1);
      grid-row: var(--grid-position-span-1);
    }
  }

  @container articleGrid (max-width: calc(300px * 3 + 1rem * 2)) {}
}

/* Card Styling */
.grid__group {
  .card--article {
    min-width: var(--container-xs);
  }

  &.grid__group--featured {
    &.grid__group--featured--1 {
      &:has(> :first-child.card--article--featured) .card--article--featured, &:has(> :last-child.card--article--featured) .card--article--featured,
      &:has(> .card--article:nth-child(2):last-child) .card--article,
      &:not(:has(> :first-child.card--article--featured)):not(:has(> :last-child.card--article--featured)) .card--article {
        --article-card-flex-direction: column;
        --article-card-border-radius: var(--border-radius) var(--border-radius) 0 0;
        --article-card-padding: 0.5rem calc(1rem - 1px) calc(0.5rem - 1px) calc(1rem - 1px);
        --article-card-gap: 0;

        .card__thumbnail-wrapper {
          --card-thumbnail-max-width: 100%;
          max-height: 250px;
          height: 250px;
        }
      }
    }

    &.grid__group--featured--2 {
      &:has(> .card--article:last-child:not(.card--article--featured)) .card--article:not(.card--article--0),
      &:has(> .card--article:first-child:not(.card--article--featured)) .card--article--0,
      &:has(> .card--article:first-child.card--article--featured):has(> .card--article:last-child.card--article--featured) .card--article:not(.card--article--2)
      {
        --article-card-flex-direction: column;
        --article-card-border-radius: var(--border-radius) var(--border-radius) 0 0;
        --article-card-padding: 0.5rem calc(1rem - 1px) calc(0.5rem - 1px) calc(1rem - 1px);
        --article-card-gap: 0;

        .card__thumbnail-wrapper {
          --card-thumbnail-max-width: 100%;
          max-height: 250px;
          height: 250px;
        }
      }
    }
  }

  &.grid__group--1 .card--article--0, &.grid__group--2 .card--article--1, &.grid__group--3 .card--article {
    --article-card-flex-direction: column;
    --article-card-border-radius: var(--border-radius) var(--border-radius) 0 0;
    --article-card-padding: 0.5rem calc(1rem - 1px) calc(0.5rem - 1px) calc(1rem - 1px);
    --article-card-gap: 0;

    .card__thumbnail-wrapper {
      --card-thumbnail-max-width: 100%;
      max-height: 250px;
      height: 250px;
    }
  }
}