/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.banner-grid-display {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Adjust the gap between banners */
    margin: 20px 0px;
}

.banner-item {
    box-sizing: border-box;
}

.banner-item img {
    width: 100%;
    height: auto;
    display: block;
}
.banner-item img:hover{
	transform: scale(1.1);
    transition-duration: .3s;
    transition-property: transform;
}


@media only screen and (max-width: 767px) {
    .banner-grid-display .banner-item {
        flex: 1 1 calc(50% - 20px) !important;
        max-width: calc(50% - 20px) !important;
    }
}
@media only screen and (max-width: 479px) {
    .banner-grid-display .banner-item {
        flex: 1 1 calc(100% - 20px) !important;
        max-width: calc(100% - 20px) !important;
    }
}