#custom-feature {
    /* Your CSS styles here */
}

#custom-map {
    border: 1px solid #ccc;
    width: 100%; /* Responsive width */
    max-width: 1100px; /* Limit max width on larger screens */
    height: auto; /* Allow content to dictate height */
    aspect-ratio: 16 / 10; /* Use aspect ratio for better control */
    position: relative; /* Centered positioning */
    margin: 0 auto; /* Center the map */
}

#custom-map iframe,
#custom-map > div {
    width: 100%;
    height: 100%;
}


.feh-content * {
    font-family: 'uniform', sans-serif;
}

.feh-content h3 {
    font-weight: 500;
    margin-bottom: 10px;
    line-height: 22px;
}

.feh-content p {
    font-weight: 400;
    margin-bottom: 10px;
    line-height: 18px;
}

/* Media queries for improved responsiveness */
@media (max-width: 768px) {
    #custom-map {
        padding-bottom: 75%; /* Slightly taller aspect ratio for tablets */
    }
}

@media (max-width: 480px) {
    #custom-map {
        padding-bottom: 180%; /* Square aspect ratio for mobile phones */
    }
}