/* Explain: App-specific layout utilities (add as needed) */
.container-x {
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1rem;
}

@media (min-width: 1024px) {
    .container-x {
        padding-inline: 2rem;
    }
}

.hero-grid {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.35) 1px, transparent 1px);
    background-size: 56px 56px;
}

.map-mask {
    background:
        radial-gradient(circle at 20% 30%, rgba(213, 43, 30, 0.35), transparent 42%),
        radial-gradient(circle at 78% 68%, rgba(30, 75, 122, 0.55), transparent 50%);
}