/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

/* Restrict width and add side margins to the blog listing page */
.body-container--blog-index {
  max-width: 1200px;   /* sets max content width */
  margin: 0 auto;      /* centers it */
  padding: 0 40px;     /* left & right padding for breathing room */
  image 
}

/* Featured (first) blog card — shrink image, give text more room */
@media (min-width: 900px) {
  .is-blog-listing .post--featured {
    display: grid !important;
    grid-template-columns: minmax(200px, 340px) 1fr !important; /* image | text */
    column-gap: 28px !important;
    align-items: start !important;
  }

  /* Constrain common media wrappers + images */
  .is-blog-listing .post--featured figure,
  .is-blog-listing .post--featured picture,
  .is-blog-listing .post--featured .post-image,
  .is-blog-listing .post--featured .hs-featured-image,
  .is-blog-listing .post--featured img {
    width: 100% !important;
    max-width: 340px !important;   /* adjust to taste */
    height: auto !important;
    display: block !important;
  }

  /* Ensure the text column can expand */
  .is-blog-listing .post--featured .post-content,
  .is-blog-listing .post--featured .blog-post__content,
  .is-blog-listing .post--featured .content,
  .is-blog-listing .post--featured .details {
    min-width: 0 !important;
  }
}

/* Mobile: keep the normal stacked layout */
@media (max-width: 899px) {
  .is-blog-listing .post--featured { display: block !important; }
}