/* Copyright Sylvio Neto @ 2025 - Programação e Design */

	:root {
		--col1: 8.33%;
		--col2: 16.66%;
		--col3: 25%;
		--col4: 33.33%;
		--col5: 41.66%;
		--col6: 50%;
		--col7: 58.33%;
		--col8: 66.66%;
		--col9: 75%;
		--col10: 83.33%;
		--col11: 91.66%;
		--col12: 100%;
	}
	
	.ui.layout-1 div.group-buttons {
		margin: 20px auto 0 0;
	}
	
	.ui.layout-1 div.ui-evento {
		display: block;
		height: auto;
		border: 1px solid black;
		margin: 0 auto;
		width: var(--col12);
		content: "";
		display: table;
		clear: both;
	}
	.ui.layout-1 div.ui-evento > div:nth-child(1) {
		display: block;
		width: var(--col4);
		height: auto;
		background-color: red;
		float: left;
		padding: 0;
		margin: 0;
	}
	.ui.layout-1 div.ui-evento > div:nth-child(1) img {
		display: block;
		width: 100%;
		height: auto;
	}
	.ui.layout-1 div.ui-evento > div:nth-child(2) {
		display: block;
		width: var(--col8);
		height: auto;
		background-color: yellow;
		float: left;
		padding: 0 20px;
		margin: 0;
	}
	
	@media screen and (min-width: 746px) {
		/* width 100% */
		.ui.layout-1 div.ui-evento { width: 100%; }
		.ui.layout-1 div.ui-evento > div:nth-child(1) { width: var(--col4); }
		.ui.layout-1 div.ui-evento > div:nth-child(2) { width: var(--col8); }
	}

	@media screen and (min-width: 1106px) {
		/ width: 1060px; */
		.ui.layout-1 div.ui-evento { width: 1060px; }
		.ui.layout-1 div.ui-evento > div:nth-child(1) { width: var(--col4); }
		.ui.layout-1 div.ui-evento > div:nth-child(2) { width: var(--col8); }
	}

	@media screen and (min-width: 1466px) {
		/* width: 1420px; */
		.ui.layout-1 div.ui-evento { width: 1420px; }
		.ui.layout-1 div.ui-evento > div:nth-child(1) { width: var(--col4); }
		.ui.layout-1 div.ui-evento > div:nth-child(2) { width: var(--col8); }
	}

	@media screen and (min-width: 1826px) {
		/* width: 1780px; */
		.ui.layout-1 div.ui-evento { width: 1780px; }
		.ui.layout-1 div.ui-evento > div:nth-child(1) { width: var(--col4); }
		.ui.layout-1 div.ui-evento > div:nth-child(2) { width: var(--col8); }
	}

	@media screen and (max-width: 745px) {
		/* 100% */
		.ui.layout-1 div.ui-evento { width: 100%; }
		.ui.layout-1 div.ui-evento > div:nth-child(1) { width: var(--col12); }
		.ui.layout-1 div.ui-evento > div:nth-child(2) { width: var(--col12); margin-top: 20px; }
	}

	@media screen and (max-width: 400px) {
		/* 100% */
		.ui.layout-1 div.ui-evento { width: 100%; }
		.ui.layout-1 div.ui-evento > div:nth-child(1) { width: var(--col12); }
		.ui.layout-1 div.ui-evento > div:nth-child(2) { width: var(--col12); margin-top: 20px; }
	}