:root {
  --rtc-blog-foreground: #123282;
  --rtc-blog-featured-background: #E9EEFC;
  --rtc-blog-border-color: #C6D1ED;
  --rtc-blog-tag-background: #29ABE2;
  --rtc-blog-legibility-max-width: 75ch;
}
.text-light-blue {
  color: var(--rtc-blog-tag-background);
}
.blog-page-category-featured {
  --swift-foreground-color: var(--rtc-blog-foreground) !important;
  color: var(--rtc-blog-foreground) !important;
  /*grid-column: span 12;*/
  display: grid;
  grid-template-columns: repeat(1,minmax(0,1fr));
  gap: 16px;
  @media (min-width: 992px) {
    grid-template-columns: repeat(12,minmax(0,1fr));
    column-gap: 32px;
    row-gap: 16px;
  }  
  .article-image img{
    width: 100%;    
  }
  .article-image {
    margin-bottom: 0 !important;
  }
  article{
    padding: 16px;
    background-color: var(--rtc-blog-featured-background);
    grid-column: span 6;    
    display: grid;
    grid-template-columns: repeat(1,minmax(0,1fr));
    gap: 16px;
    h2 {
      font-size: 24px;
      @media (width >= 992px) {
        font-size: 40px;
      }
    }
    /*@media (min-width: 1440px) {*/
    /*  .article-image {*/
    /*    margin-bottom: 16px !important;*/
    /*    img {*/
    /*      width: 100%;          */
    /*    }*/
    /*  }*/
    /*}*/
    /*@media (max-width: 1439px) {      */
    /*  display: grid;*/
    /*  grid-template-columns: repeat(7,minmax(0,1fr));*/
    /*  gap: 16px;*/
    /*  align-items: start;*/
    /*  .article-image {*/
    /*    grid-column: span 3;*/
    /*  }*/
    /*  .article-content {*/
    /*    grid-column: span 4;*/
    /*  }*/
    /*}    */
  }
}
.blog-page-featured {
  --swift-foreground-color: var(--rtc-blog-foreground) !important;
  color: var(--rtc-blog-foreground) !important;
  /*grid-column: span 12;*/
  display: grid;
  grid-template-columns: repeat(1,minmax(0,1fr));
  gap: 32px;
  @media (width >= 992px) {
    gap: 16px;
  }
  @media (width >= 768px) {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  @media (width >= 992px) {
    grid-template-columns: repeat(1,minmax(0,1fr));
  }
  @media (min-width: 1440px) {
    grid-template-columns: repeat(12,minmax(0,1fr));
    column-gap: 32px;
    row-gap: 16px;
  }
  .article-image img {
    width: 100%;
  }
  
  article:first-child {
    padding: 16px;
    background-color: var(--rtc-blog-featured-background);
    display: grid;
    gap: 16px;
    h2 {
      font-size: 24px;
      @media (width >= 992px) {
        font-size: 40px;
      }
    }
    @media (992px <= width < 1440px) {     
      grid-template-columns: repeat(7,minmax(0,1fr));     
      align-items: start;
      .article-image {
        grid-column: span 3;      
      }
      .article-content {
        grid-column: span 4;
      }
    }
    @media (min-width: 1440px) {
      .article-image {
        margin-bottom: 16px !important;
      }
      grid-column: span 5;
      grid-row: span 4;
    }
  }
  article:not(:first-child) {
    display: grid;    
    gap: 16px;
    align-items: start;
    @media (min-width: 992px) {
      grid-template-columns: repeat(7,minmax(0,1fr));
      .article-image {
        grid-column: span 3;     
      }
      .article-content {
        grid-column: span 4;
      }
    }
  }
  article:nth-child(2) {
    @media (min-width: 1440px) { 
      grid-column: span 7;
      grid-row: span 1;
    }
  }
  article:nth-child(3) {   
   
    @media (min-width: 1440px) {
      padding-block: 16px;
      border-top: 1px solid var(--rtc-blog-border-color);
      border-bottom: 1px solid var(--rtc-blog-border-color);
      grid-column: span 7;
      grid-row: span 2;
    }
  }
  article:nth-child(4) {
    @media (min-width: 1440px) {
      grid-column: span 7;
      grid-row: span 1;
    }
  }
}
.blog-article-list {
  border-top: 1px solid var(--rtc-blog-border-color);
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 32px;
  @media (min-width: 768px) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  @media (min-width: 1440px) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .blog-list-header {
    @media (min-width: 768px) {
      grid-column: span 2;      
    }
    @media (min-width: 1440px) {
      grid-column: span 4;
    }
    h2 {
      margin-bottom: 0 !important;
    }
  }
}
[data-role="go-to-category"] {
  .icon {
    transition: all 0.125s ease-out;
    
  }
  &:hover .icon {
    translate: 2px -2px;
  }
}
.blog-article-list .blog-date, .blog-page-featured  article:not(:first-child) .blog-date  {
  @media (width < 768px) {
    border-bottom: 1px solid #e8e8e8;
    padding-bottom: 8px;    
    width: max-content;
  }
}  
.blog-tag {
  background: var(--rtc-blog-tag-background);
  border-radius: 4px;
 }
.fw-semibold {
  font-weight: 600;
}
.increase-legibility {
  max-width: var(--rtc-blog-legibility-max-width);
}