img {
    border: 0;
}
figure {
    margin: 0;
}


img.content {
	width: 100%;
	max-width: 550px;
	display: block;
	margin: 0.8em auto;
}



div.group {
	
	text-align: center;
	background: url('/assets/custom/img/design/panel.jpg') #D1D7DC repeat left top;
	
	border-radius: var(--bs-border-radius) !important;	
	border-width: 30px;
	border-color: #555;	 
}

div.group img {
	
	width: calc(100% - 2em);

	display: inline;
	margin: 0.8em;
	
}

/*
<figure class="content">
<img src="/assets/custom/img/content/review/ieronim.jpg" alt="..." title="..." />
  <figcaption class="left">Картина Микеланджело...</figcaption>
</figure>
*/

figure::after, figure::before {
  box-sizing: border-box;
}

figure.content {
	width: 100%;
	max-width: 580px;
	display: block;
	margin: 20px auto;	 
	padding: 10px;	
	
	background: url('/assets/custom/img/design/panel.jpg') #D1D7DC repeat left top;
	
	border-radius: var(--bs-border-radius) !important;	
	border-width: 30px;
	border-color: #555;	  
}

figure.content img {
	width: 100%;
	display: block;
	margin: 10px auto;
	padding: 5px;	
	background-color: var(--bs-body-bg);
	border: var(--bs-border-width) solid var(--bs-border-color);
	border-radius: var(--bs-border-radius);
	max-width: 100%;
	height: auto;	
}

figure.content figcaption {
	color: #222;
	text-align: center;
	font-family: Verdna, Calibri; 
	font-weight: 600;	
	font-size: 0.9em;
	line-height: 1.1em;
}

figure.content figcaption.left {
	text-align: left;
	padding: 0 20px;

}




.center-img {
  display: block;
  margin: 0 auto;
}




/*
:root {
  --bs-breakpoint-xs: 0;
  --bs-breakpoint-sm: 576px;
  --bs-breakpoint-md: 768px;
  --bs-breakpoint-lg: 992px;
  --bs-breakpoint-xl: 1200px;
	--bs-breakpoint-xxl: 1400px;
}
*/

/* ----------------------------------------------------------------------------- * 
 *                                Media Queries                                  *
 * ----------------------------------------------------------------------------- */

@media only screen and (min-width: 460px) {  


}

@media only screen and (min-width: 576px) {  

img.content {
	margin: 1em auto;
}

div.group img {
	width: calc(50% - 1.8em);	
	display: inline;
	margin: 0.8em;
}

}

@media only screen and (min-width: 768px) {  


}


@media only screen and (min-width: 992px) {  


}


/*
breakpoints from Bootstrap:  scss/_variables.scss
 
grid-breakpoints
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
) !default;

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);


*/


/* Small devices (small phones, 576px and up) */
@media only screen and (min-width: 360px) and (max-width: 459px) {
	
	
	
}
/* Small devices (landscape phones, 576px and up) */
@media only screen and (min-width: 460px) and (max-width: 575px) {
	



/* Medium devices (tablets, 768px and up) */
@media only screen and (min-width: 576px) and (max-width: 767px) {


/* Medium devices (tablets, 768px and up) */
@media only screen and (min-width: 768px) and (max-width: 991px) {





}
/* Large devices (desktops, 992px and up) */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
	



}
/* Extra large devices (large desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {


  

}