Widget:Teste
<style> .home-button-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 10px; box-sizing: border-box; }
.home-button-item {
position: relative;
overflow: hidden;
border: 1px solid #ddd;
border-radius: 8px;
background: #fff;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
box-sizing: border-box;
}
.home-button-item:hover { transform: translateY(-5px); border-color: #007bff; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); }
.home-button-item a { display: block; text-decoration: none; color: inherit; }
.home-button-image { width: 100%; aspect-ratio: 16/9; display: block; margin: 0; padding: 0; }
.home-button-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter 0.3s ease; }
.home-button-item:hover .home-button-image img { filter: brightness(1.1); }
.home-button-title {
font-family: sans-serif; font-weight: bold; font-size: clamp(1.2em, 5vw, 1.3em); background: #fff; color: #0645AD; margin: 0; padding: 10px 5px; position: relative; text-transform: uppercase; border-top: 1px solid #ddd; text-align: center; text-decoration: none; transition: background-color 0.3s ease; box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.1);
}
.home-button-item:hover .home-button-title {
background-color: #f9f9f9;
}
.home-button-item.disabled { opacity: 0.5; pointer-events: none; transform: none; box-shadow: none; border-color: #ddd; }
.home-button-item.disabled .home-button-title { color: #999; }
@media (max-width: 1280px) { .home-button-container { grid-template-columns: repeat(2, 1fr); } } </style>