/* 🔲 GLOBAL CITIES */
.globalcities-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    padding: 0.4rem;
}
.globalcity {
    flex: 0 1 230px; /* Sets the width of each city */
    border-radius: 16px;
    overflow: hidden; /* Hides the overflowing content */
    background: #f5f5f5;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    cursor: pointer;
    box-sizing: border-box; /* Makes the border-radius work */
}
.globalcity:hover {
    transform: scale(1.02);
}
 /* TODO: Responsive aspect ratio of img [ IMP SNIPPET ]  */
.globalcity img {
    width: calc(100% - 12px); /** Adjusts the width of the image **/
    height: calc(100% - 12px); /** Adjusts the height of the image */
    margin: 6px 6px 2px 6px; /** Adjusts the margins of the image */
    border-radius: 12px;
    aspect-ratio: 4 / 3; /** Sets the aspect ratio of the image */
    object-fit: cover; /** Ensures the image is fully visible */
    height: auto; 
    display: block; /** Removes any extra whitespace around the image */
}
.cityinfo {
    background: #f5f5f5;
    color: #262626;
    text-align: center;
    padding: 2px 0 3px;
    font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.8px;
    border-radius: 20px;
}
@media (max-width: 768px) {
    .globalcity{
         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
    .globalcity img {
        flex: 1 1 auto;
        /* aspect-ratio: 6 / 3; */
    }
    .cityinfo {
        padding: 2px 0 3px;
        font-size: 1rem;
        letter-spacing: -0.6px;
    }
}