@keyframes appear {
    from {
        color: lightgray
    }

    to {
        color: black
    }
}

#main-01 {
    /* max-width: 50svw; */
    width: 800px;
    background-color: #f9f9f9;
    color: var(--clr-main-text);
    /* White background for a clean look */
    margin: 10px auto;
    /* Add margin to top and bottom. Center the content with more spacing */
    padding: 10px;
    border-radius: 12px;
    /* Softer rounded corners */
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
    /* Enhanced shadow for depth */
    font-family: 'Arial', sans-serif;

    /* Use a modern sans-serif font */
    h1 {
        /* font-size: 2rem; */
        margin-bottom: 20px;
        border-bottom: 3px solid #1f51ff;
        padding-bottom: 10px;
        color: black;
        animation-name: appear;
        animation-duration: 4s;
    }
}

.location-blocks {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

}

.sub-block {
    width: 350px;
}

.google-map {
    width: 100%;
    height: 300px;
    margin-top: 20px;
    border-radius: 12px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
}

@container container-responsive-name (max-width: 1100px) {
    #main-01 {
        max-width: 70svw;

        h1 {
            font-size: 1.15rem;
        }

        h2 {
            font-size: 1rem;
        }

    }
}

@container container-responsive-name (max-width: 500px) {

    #container-grid {
        font-size: var(--font-size-sm);
    }

    #main-01 {
        max-width: 90svw;

        h1 {
            font-size: 1.4rem;
        }

        h2 {
            font-size: 1rem;
        }

    }
}