Predefinição:ItemButton/styles.css

.container-principal{
	max-width: 1000px; 
	margin: 0 auto; 
	padding: 0 10px; 
	display: flex; 
	flex-wrap: wrap; 
	gap: 20px; 
	width: 100%; 
	box-sizing: border-box;
}

.coluna-flex{
	flex: 1; min-width: 45%; 
	display: flex; 
	flex-direction: column;
}

.caixa-categoria{
	border: 1px solid #e0e0e0; 
	border-radius: 8px; 
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); 
	overflow: hidden; 
	margin-bottom: 20px; 
	background: #fff;
}

.titulo-categoria{
	text-align: center; 
	font-size: 1.4em; 
	font-weight: 600; 
	color: white; 
	padding: 12px 15px;
}

.itens-linha{
	display: flex;
	flex-wrap: wrap;
	justify-content:space-around;
	margin-top: 20px; 
	gap:25px;
	border: 1px solid black;
}

.item-celula{
	width: 25%;
	box-sizing: border-box;
	margin-bottom: 20px;
	background-color:#fff;
}

.item-botao {
    display: block;
    text-align: center;
    text-decoration: none;
    color: #333;
    
    /* Estilos Visuais do seu código (borda 3D, raio, sombra) */
    margin-top: 5px; 
    margin-bottom: 20px; 
    padding: 0;
    
    border-radius: 30px; 
    border: 20px inset black; 
    
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); 
    transition: transform 0.2s, box-shadow 0.2s;
}

/* Efeito Hover */
.item-botao:hover {
    transform: translateY(-2px); 
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); 
}