Cacher is the code snippet organizer for pro developers

<div class="fundo-modal" id="modal-id"> 
    <div class="modal">
        <div class="modal-container">
            <div class="modal-titulo">
                <h2>Título</h2>
            </div>
            <div class="modal-mensagem">
            	<p>Conteúdo</p>
            </div>
            <a class="modal-fechar js-fechar-modal" href="">X</a>
        </div>
    </div>
</div>

.fundo-modal{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: rgba(#000, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	z-index: -1;
	visibility: hidden;
	transition: all 0.6s;
	perspective: 1000;
	padding: 50px;
	&.ativo{
		z-index: 1000;
		opacity: 1;
		visibility: visible;
	}
	@media screen and (max-width: $mobile) {

	}
}

.modal{
	width: aut0;
	max-width: 400px;
	max-height: 100%;
	overflow: auto;
	padding: 20px;
	background-color: #fff;
	box-shadow: 0 4px 4px 2px rgba(#000,0.2);
	//transform: translate3d(0,0,100px);
	transition: all 0.6s;
	color: #000;
	font-size: 14px;
	@media screen and (max-width: $mobile) {
		width: 100%;
	}
	.modal-container{
		@include outer-container;
		height: 100%;
		position: relative;
	}
	.modal-titulo{
		text-align: left;
		//margin: 0 20px;
		border-bottom: 1px solid #e4e4e4;
		h2{
			margin-bottom: 10px;
		}
	}
	.modal-mensagem{
		padding-top: 20px;
		padding-bottom: 20px;
		p{
			margin-bottom: 1em;
		}
	}
	.modal-fechar{
		display: block;
		position: absolute;
		top: 20px;
		right: 20px;
	}
}