/*    
        flags-disp.css
                                  */
                                  

/* Container for the three flags */
.flags-container {
    display: flex; /* Use flexbox for horizontal alignment */
    justify-content: center; /* Center the flags */
    align-items: center; /* Align items vertically */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    margin: 20px 0; /* Margin above and below the flags */
}

/* General styles for the flags */
.flag {
    display: inline-block;
    vertical-align: middle;
    margin: 10px; /* Spacing between the flags */
    max-width: 100%; /* Ensure flags are responsive */
}

/* Responsive sizes for flags */
@media (max-width: 1325px) {
    .flag {
        width: 233px;
        height: 127px;
    }
}

@media (min-width: 1326px) and (max-width: 2500px) {
    .flag {
        width: 466px;
        height: 254px;
    }
}

@media (min-width: 2501px) {
    .flag {
        width: 466px; /* Maximum size */
        height: 254px; /* Maximum size */
    }
}

/* Container for the USA flag */
.usa-flag-container {
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Center the flag */
    margin: 20px 0; /* Margin above and below the flag */
}

/* Styles for the USA flag */
.usa-flag {
    display: block;
    max-width: 100%; /* Ensure flag is responsive */
}

/* Responsive sizes for the USA flag */
@media (max-width: 1325px) {
    .usa-flag {
        width: 233px;
        height: 127px;
    }
}

@media (min-width: 1326px) and (max-width: 2500px) {
    .usa-flag {
        width: 466px;
        height: 254px;
    }
}

@media (min-width: 2501px) {
    .usa-flag {
        width: 466px; /* Maximum size */
        height: 254px; /* Maximum size */
    }
}