/*.float-image {*/
/*    height: auto;*/
/*    max-width: 100%;*/
/*    display: block;*/
/*    margin: 1rem 0;*/
/*}*/

.avatar-sm {
    width: 20px;
    height: 20px;
    object-fit: cover;
    border-radius: 50%;
}

.avatar {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
}

.float-image.imgcap-30p { width: 30%; }
.float-image.imgcap-40p { width: 40%; }
.float-image.imgcap-50p { width: 50%; }
.float-image.imgcap-75p { width: 75%; }
.float-image.imgcap-100p { width: 100%; }

.float-image.left {
    float: left;
    margin: 0 1.5rem 1.5rem 0;
}

.float-image.right {
    float: right;
    margin: 0 0 1.8rem 1.8rem;
}

.float-image.center {
    margin-left: auto;
    margin-right: auto;
}


/* Base responsive behavior */
.float-image {
    max-width: 100%;
    height: auto;
}

.richtext-image img {
    width: 100%;
    height: auto;
    display: block;
}

figcaption {
  font-size: 0.85rem;   /* smaller than body text */
  line-height: 1.3;     /* tighter spacing */
  color: #666;          /* softer than main text */
  margin-top: 0.4rem;
  margin-left: 0.2rem;
  margin-right: 0.2rem;
}

/* Desktop/tablet wrapping */
@media (min-width: 768px) {
    .float-image.left {
        float: left;  /* or right respectively */
    }
}

@media (min-width: 768px) {
    .float-image.right {
        float: right;  /* or right respectively */
    }
}
/* Mobile: no float, full width */
@media (max-width: 767.98px) {
    .float-image.left,
    .float-image.right {
        float: none;
        margin: 1rem auto;
        display: block;
        width: 100%;  /* or keep percentage if you prefer */
    }
}