.banner-container {
    background-image: url("../img/bg.png");
    background-attachment: fixed;
    box-shadow: inset 0 0 0 2000px #1c1c1c7a;
    text-align: center;
    padding: 160px 15px;
}

@media (max-width: 768px) {
    .banner-container {
        padding: 100px 15px;
    }
}

.city-search {
    max-width: 530px;
    margin: auto;
    position: relative;
}

.city-heading {
    text-align: center;
}

.city-card-container {
    text-align: center;
    margin-top: 20px;
}

.city-card {
    background-color: #ffffff;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    display: inline-block;
    padding: 20px;
}

.city-card:focus,
.city-card:hover {
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}

.city-img {
    height: 100px;
    width: 100px;
}