How to resize embedded photos from Flickr

Some website housekeeping, in case I forget. 

If you were here this week, you must have noticed that the photos have not been loading properly. I figured, with some AI help, that it could be due to this CSS/xml script I added to automatically resize the image widths of my embedded Flickr photos. 

/*----- POST IMAGE -----*/

    .post-body .separator {}

    .post-body .separator img {

      max-width: 100%;

      height: auto;

      margin-bottom: 15px;

    }

.post-body img,

.post-body .separator a img,

.post-body iframe,

.post-body video,

.post-body embed {

  width: 100% !important;   /* always match the column’s width */

  max-width: 100% !important;

  height: auto !important;  /* keep the correct proportions */

  display: block;           /* eliminates stray inline gaps */

}

/* === EXCEPTION: keep Flickr photos at their native width ============== */

/* Full-width for regular images and the usual video hosts */

.post-body img,

.post-body .separator a img,

.post-body iframe[src*="youtube.com"],

.post-body iframe[src*="youtu.be"],

.post-body iframe[src*="vimeo.com"],

.post-body video,

.post-body embed {

  width: 100% !important;

  max-width: 100% !important;

  height: auto !important;

  display: block;

}

/* Let Flickr’s own script control sizing */

.post-body iframe[src*="flickr.com"],

.post-body a[data-flickr-embed="true"] {

  width: auto !important;      /* keep native width */

  max-width: 100% !important;  /* still responsive if wider than column */

  height: auto !important;

  display: block;

  margin: 0 auto 15px;         /* centre + bottom gap */

}

  .tr-caption-container {

      margin-top: 10px;

      margin-bottom: 15px;

    }

    .tr-caption-container td {

      width: 300px;

    }

    .tr-caption-container td img {

      max-width: 100%;

      height: auto;

    }

    .tr-caption-container .tr-caption {

      color: #555;

      font-size: .9rem;

      font-style: italic;

      background-color: #eee;

      padding: 5px 0;

      border: none;

    }

I did some tweaks—the closest I've been to vibe-coding—but AI couldn't seem to grasp the situation. With some common sense, I realize the issue could be the caption container. I never put captions in photos; I describe the pictures in the text. I deleted that part of the code and retained the following.

/*----- POST IMAGE -----*/
.post-body .separator {}
.post-body .separator img {
max-width: 100%;
height: auto;
margin-bottom: 15px;
}

/* === EXCEPTION: keep Flickr photos at their native width ============== */
/* Full-width for regular images and the usual video hosts */
.post-body img,
.post-body .separator a img,
.post-body iframe[src*="youtube.com"],
.post-body iframe[src*="youtu.be"],
.post-body iframe[src*="vimeo.com"],
.post-body video,
.post-body embed {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
display: block;
}

Problem fixed—but I don't claim credit entirely.