/*=================*/
/* slide_container */
.slide_container {
/* --img_width: 4rem;*/
 --d_margin: 0px;
 --margin_l: 0px;
 --margin_r: 0px;
 --swipe_speed: 0.5s;
 position: absolute;
 display: none;
}
.asrtmnt_item.selected .slide_container {
 display: flex;
 grid-area: pic;
 justify-self: start;
 align-items: center;
 justify-content: space-between;
 box-shadow: var( --mainShadow );
 border-radius: var(--m_border_r_a_item);
}
/*=================*/

/*=================*/
/*     button      */
.asrtmnt_item .slide_container button {
 display: none;
 color: lightgray;
}
.asrtmnt_item.selected .slide_container[data-total_imgs='1'] button {
 display: none;
}
.asrtmnt_item.selected .slide_container button {
 display: block;
 position: absolute;
 width: 20%;
 height: calc(100% - 2rem);
 font-size: 2rem;
 background: none;
 border: none;
 border-radius: 50%;
}
.asrtmnt_item.selected .slide_container button:hover {
 color: var( --mainGrayColor );
/* background-color: hsla( 0, 0%, 100%, 0.5 );*/
}
button.to_left {
	left: -1rem;
	padding-left: 1.5rem;
	text-align: left;
}
button.to_right {
	right: -1rem;
	padding-right: 1.5rem;
	text-align: right;
}
/*=================*/

/*=================*/
/*   slide_frame   */
.slide_frame {
/* position: relative;*/
 width: var( --img_width );
 overflow: hidden;
 display: flex;
 justify-content: center;
 border-radius: var(--m_border_r_a_item);
}
.slide_frame * {
	pointer-events: none;
}
/*=================*/

/*=================*/
/*  slide_window   */
.slide_window {
 display: flex;
 --frame_num: 1;
 width: calc( var( --frame_num ) * var( --img_width ) );
 height: 100%;
 margin-left: var( --margin_l );
 margin-right: var( --margin_r );
 justify-content: center;
}
.slide_window.action_left {
 transition: margin var( --swipe_speed ) ease;
 margin-left: calc( 2 * var( --img_width ) ); /* - var( --d_margin ) );*/
}
.slide_window.action_right {
 transition: margin var( --swipe_speed ) ease;
 margin-right: calc( 2 * var( --img_width ) ); /* - var( --d_margin ) );*/
}

.slide {
 width: 0;
 overflow: hidden;
 border-radius: 0.5vh;
}

.slide.active {
	width: var( --img_width );
}

.slide img {
 width: 100%;
 height: 100%;
}