.blog-pull-quote {
font-family:"palanquin", sans-serif;
font-weight:400;
font-size: var(--size-heading-s);
line-height: 1.3em;
}

.blog-text-small{
font-family:"palanquin", sans-serif;
font-weight:400;
font-size: var(--size-text-xs);
line-height: 1.3em; 
}
.blog-h3 {
 font-family: "palanquin", serif;
 font-weight:400;
 font-weight: normal;
font-size: var(--size-heading-s);
line-height: 1.3em;
}

.blog-subhead {
font-family: "antonio", serif;
font-weight:700;
font-size: var(--size-heading-s);
line-height: 1.3em;
padding-top: var(--padding-m);
}

.blog-gallery {
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
 gap: 3rem;
}

.blog-gallery img {
 max-width: 300px;
 width: 100%;
 height: auto;
 margin: 0 auto;
}

.wp-element-caption{
   text-align: left;
   color: var(--color-uwga-neutral-dark);
   font-style: italic; 
   font-family:"palanquin", sans-serif;
   font-weight:400;
   font-size: var(--size-text-xs);
   line-height: 1.3em; 
}


/* Desktop: Float the image and wrap text */
.custom-float-left {
  padding-top: var(--padding-s);
  float: left; /* Floats the image to the left */
  width: 40%;
  max-width:990px;
  margin-right: var(--gap-grid);
/*  margin-bottom: calc(var(--gap-grid)*.5); /* Adds bottom space between the image and text */
}

/* Ensure the caption stays with the image */
.custom-float-left figcaption {
  width: 100%; /* Makes the caption take up the full width of the <figure> */
  box-sizing: border-box; /* Includes padding and border in the element's total width and height */
}
.custom-float-right {
  padding: var(--padding-s) 0;
  float: right; /* Floats the image to the left */
  width: 40%;
  max-width:990px;
  margin-left: var(--gap-grid);
  /*margin-bottom: calc(var(--gap-grid)*.5); /* Adds space between the image and text */
}

/* Ensure the caption stays with the image */
.custom-float-left figcaption, .custom-float-right figcaption {
  width: 100%; /* Makes the caption take up the full width of the <figure> */
  box-sizing: border-box; /* Includes padding and border in the element's total width and height */
}
/* Mobile: Stack the image and remove the float */
@media (max-width: 900px) {
  .custom-float-left, .custom-float-right {
    float: none; /* Removes the float on smaller screens */
    margin: var(--gap-grid) auto; /* Adjusts the margins for mobile stacking */
    width: 100%; /* Ensures the image takes up full width on mobile */
  }

  .custom-float-left img, .custom-float-right img{
    width: 100%; /* Ensures the image fills its container on mobile */
    height: auto;
  }

}