.drst-gallery {
	position: relative;
	overflow: hidden;
	height: 0;
	padding-bottom: 40%;
	padding-bottom: calc(20em + 20%);
}
.drst-gallery__wrapper {
    position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.drst-gallery__grid {
	display: -webkit-flex;
	display: flex;
    width: 100%;
	height: 100%;
}
.drst-gallery__grid-item {
	-webkit-flex: 0 0 auto;
	flex: 0 0 auto;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}


/**
 * Slider
 */
.drst-gallery__slider {
	position: relative;
    width: 100%;
	height: 100%;
}
.drst-gallery__slider-img {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	margin: 0;
	opacity: 0;
	-webkit-transition: opacity 1s;
	transition: opacity 1s;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.drst-gallery__slider-img.active {
	opacity: 1;
}
.drst-gallery__slider-nav {
   position: absolute;
   top: auto;
   right: 0;
   bottom: 1em;
   left: 0;
   text-align: center;
}
.drst-gallery__slider-nav span {
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	margin: 0.25em;
	border-radius: 50%;
	cursor: pointer;
	border: solid 1px rgba(0,0,0,0.4);
}
.drst-gallery__slider-nav span.active {
	border-color: transparent;
	background-color: rgba(0,0,0,0.4);
}
.drst-gallery__progress-bar {
   position: absolute;
   top: auto;
   right: 0;
   bottom: 0;
   left: 0;
   height: 0.25em;
   background-color: rgba(0,0,0,0.4);
   animation: animateProgressBar 5s ease-out infinite;
}
@keyframes animateProgressBar {
   0% { width: 0; }
   100% { width: 100%; }
}