feat(utilities): revamp .img-thumbnail and add desc in docs (#1441)

Co-authored-by: Julien Déramond <[email protected]>

scss/_variables.scss

@@ -1806,10 +1806,10 @@ $list-group-dark-active-border-color: $list-group-dark-active-bg !default; // Bo
 // Image thumbnails
 
 // scss-docs-start thumbnail-variables
-$thumbnail-padding: $spacer * .5 !default;
+$thumbnail-padding: 0 !default; // Boosted mod
 $thumbnail-bg: $body-bg !default;
 $thumbnail-border-width: $border-width !default;
-$thumbnail-border-color: var(--#{$prefix}border-color) !default;
+$thumbnail-border-color: var(--#{$prefix}border-color-translucent) !default; // Boosted mod
 $thumbnail-border-radius: $border-radius !default;
 $thumbnail-box-shadow: $box-shadow-sm !default;
 // scss-docs-end thumbnail-variables

site/content/docs/5.2/content/images.md

@@ -14,7 +14,13 @@ Images in Boosted are made responsive with `.img-fluid`. This applies `max-width
 {{< placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" >}}
 {{< /example >}}
 
-<!-- Boosted mod: no rounded thumbnails -->
+## Image thumbnails
+
+In addition to our [border-radius utilities]({{< docsref "/utilities/borders" >}}), you can use `.img-thumbnail` to give an image a 2px border appearance.
+
+{{< example >}}
+{{< placeholder width="200" height="200" class="img-thumbnail" title="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera" >}}
+{{< /example >}}
 
 ## Aligning images