/*
Block Name: Columns with Modals
Description: This is a base-block that is designed to be customised for the clients theme.
*/


body.wp-admin section { border: 1px solid #ccc; }
body.wp-admin section .container .grid:empty:before { color: red; font-weight: 600; content: "This is an empty *block* - add content"; padding: 2rem 0; display: block;}
body.wp-admin section .container .grid .col:empty:before { color: red; font-weight: 600; content: "This is an empty *column* - add content"; padding: 2rem 0; display: block;}
.block-columns-with-modals .modal-trigger-content h3 { margin-bottom: 1rem;}

/* Modal Trigger */
.modal-trigger-content { padding: 3rem; }
.popup-trigger img { width: 100%; }

/* Modal */
.modal-title { padding: 3rem; }
.modal-title h3 { font-size: 2.5rem; margin-bottom: 0; }
.popup-trigger:hover { cursor: pointer; }

 .popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 3rem;
    border-radius: 1rem;
    box-shadow: 0 2rem 3.5rem rgba(0, 0, 0, 0.7);
    z-index: 9999;
    }
    
    .overlay {
		  display: none;
		  position: fixed;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  background-color: var(--brand-2);
			opacity: 0.7;
		  z-index: 9998;
    }

button.close-btn {
    width: 4rem;
    height: 4rem;
    font-size: 4rem;
    line-height: 0;
    color: #fff;
	background-color: #fff;
	color: var(--brand-1);
    border-radius: 10rem;
    position: absolute;
    top: -6rem;
	right: 0rem;
}

button.close-btn:hover {
	background-color: var(--brand-1);
	color: #fff;
}

button.popup-trigger { 
	background-color: var(--brand-1);
	padding: 1rem 2rem;
	color: #fff;
	font-size: inherit;
	margin-top: 3rem;
}


@media (max-width: 550px) {
.popup { top: 50%; left: 5%; transform: translate(-0%, -50%); padding: 2rem; width: 90%; }
}