/* ================================================================================================================== */
/* corpo */
/* ================================================================================================================== */

div#acomposition { display: block; position: relative; width: 100%; padding: 0; margin: 0 auto; }
div#acomposition h1 { margin-bottom: 25px; font-size: 2.857em; color: var(--color2); }

/* ================================================================================================================== */
/* bloco */
/* ================================================================================================================== */

div#acomposition div.left { display: inline-block; position: relative; width: 100%; max-width: 600px; vertical-align: top; margin-top: 50px; }
div#acomposition div.right { display: inline-block; position: relative; width: 100%; max-width: 600px; vertical-align: top; margin-top: 50px; }
	div#acomposition div.grid { display: inline-block; position: relative; width: 50%; height: auto; vertical-align: top; padding-left: 20px; padding-bottom: 20px; }
	div#acomposition div.block { display: block; position: relative; text-align: left; width: 100%; height: 220px; cursor: default; }
	div#acomposition div.block.big { height: 450px; }
		div#acomposition div.block div.photo { display: block; position: relative; width: 100%; height: 100%; z-index: 1; opacity: 0; }
		div#acomposition div.block.big div.photo,
		div#acomposition div.block:hover div.photo { opacity: 1; }
		div#acomposition div.block div.text { display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; padding: 25px 20px; z-index: 2; }
		div#acomposition div.block:hover div.text { opacity: 0; }
		div#acomposition div.block.big:hover div.text { opacity: 1; }
		div#acomposition div.block.big div.text { padding: 30px 40px; height: auto; }
			div#acomposition div.block div.text span.bg { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color2); opacity: 1; z-index: 1; }
			div#acomposition div.block.big div.text span.bg { background-color: var(--color10); opacity: 0.5; }
			div#acomposition div.block div.text h2 { display: block; position: relative; font-size: 2.14em; line-height: 25px; color: var(--color3); z-index: 3; margin-bottom: 15px; }
			div#acomposition div.block div.text p.description { display: block; position: relative; color: var(--color3); z-index: 3; }

@media all and ( max-width: 1265px ) {
	div#acomposition div.grid { padding: 10px; }
}