/* 
	===========================================
	Setup básico 

	* Classes que foram comentadas em style.css para poder modificar
  	* o estilo do excerto #posts-slider p
	
	===========================================
*/

.carousel-item img {

	width: 100%;
	
	/* Imagem responsiva e sempre no centro */

	object-fit: cover;
	object-position: center;
}

.caption {

	/* Posicionar a div da legenda na parte inferior da imagem */

	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding-top: 0rem;
	margin: 0 auto;

	/* Largura e altura */

	width: 100%;

	/* Posição da legenda e altura da sombra */

	display: flex;
	flex-direction: column;
	justify-content: end;
	height: 40%;
	padding-bottom: 0rem;

	/* Picuinhas */

	text-align: center;
	color: #fff;
	background-image: linear-gradient(rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.7) 100%);;
	line-height: clamp(1.2rem, 2.5vw, 2rem);
}

.caption__title {
	font-size: clamp(1.8rem, 1.7vw, 2.7rem);
	font-weight: 800;
	text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.9);
}
.caption__excerpt {
	font-size: clamp(1rem, 1vw, 2rem);
}

.caption__title a,
.caption__excerpt span>p {
	color: #fff;
}

/* 
	===========================================
	Responsividade 
	===========================================
*/

/* Tablets */

@media screen and (max-width: 830px) {

	.caption {
		background-image: none;
		background-color: #080909b2;
		color: #fff;
		position: relative;
		text-align: left;
		padding: 1em;
	}


	.carousel-item img {
		height: 300px;
	}

	.caption__title {
		font-size: 1.5em;
		margin-bottom: 1rem;
		text-shadow: none;
	}

}


/* Celulares */

@media screen and (max-width: 780px) {

	.caption {
		line-height: 1.5rem;
	}

	.carousel-item img {
		object-fit: contain;
		height: 100%;
	}

	/* Botões um pouco acima da linha fina */
	.carousel-control-prev-icon,
	.carousel-control-next-icon {
		position: relative;
		bottom: 5rem;
		left: 0 !important;
		display: none !important;	
	}

	.caption__title {
		font-size: 1.5em;
		margin-bottom: 1rem;
		text-shadow: none;
	}

	.caption__excerpt {
		font-size: 1em;
		
	}
}