/* Template 21 */
.template_21 {
    --color1: hsl(130, 95%, 85%);
    --color2: hsl(250, 95%, 85%);
    --color3: hsl(310, 95%, 85%);
    --color4: hsl(380, 95%, 85%);
    --color5: hsl(430, 95%, 85%);
    --color-text: #fff;
  }
  .template_21 .article-container {
    container-type: inline-size;
    display: grid;
  }
  .template_21 .article-container {
    flex: 1 1 33ch;
  }
  .template_21 .article-container:nth-child(odd) {
    --template: 30ch 10% 1fr;
    --img-col-start: 2;
    --img-col-end: 4;
    --content-col-start: 1;
    --content-col-end: 3;
    --img-border-radius: 0 3rem 3rem 0;
  }
  .template_21 .article-container:nth-child(odd) {
    --background: var(--secondary-color);
  }
  .template_21 .article-container:nth-child(even) {
    --background: var(--primary-color);
  }
  .template_21 {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin: 5vh auto;
    width: 100%;
  }
  
  .article_21 {
    display: grid;
    grid-template-rows: 1fr 3rem max(1fr, 30vh);
    border-radius: 15px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.35);
    overflow: hidden;
  }
  .article_21 img,
  .article_21 .content {
    grid-column-start: 1;
    grid-column-end: 2;
  }
  .article_21 img {
    aspect-ratio: 3/1;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100% !important;
    display: block;
    grid-row-start: 1;
    grid-row-end: 2;
  }
  .template_21 .article-container:nth-child(odd) .content {
    background-color: var(--secondary-color);
  }
  .template_21 .article-container:nth-child(even) .content {
    background-color: var(--primary-color);
  }
  .article_21 .content {
    padding: 1.5rem;
    border-radius: 3rem 3rem 0 0;
    grid-row-start: 2;
    grid-row-end: 4;
    color: #fff;
  }
  
  @container (width > 50ch) {
    .article_21 {
      display: grid;
      grid-template-columns: var(--template, 1fr 10% 30ch);
      grid-template-rows: unset;
    }
    .article_21 img,
    .article_21 .content {
      grid-row-start: 1;
      grid-row-end: 1;
    }
    .article_21 img {
      height: 100%;
      grid-column-start: var(--img-col-start, 1);
      grid-column-end: var(--img-col-end, 3);
    }
    .article_21 .content {
      grid-column-start: var(--content-col-start, 2);
      grid-column-end: var(--content-col-end, 4);
      border-radius: var(--img-border-radius, 3rem 0 0 3rem);
    }
  }