/* https://css-tricks.com/look-ma-no-media-queries-responsive-layouts-using-css-grid/ */

.hero {
    /* Photo by mnm.all on Unsplash 
    background: url('https://images.unsplash.com/photo-1518176258769-f227c798150e') center;
    background-size: cover; */
    justify-content: center;
    padding: 4rem 2rem;
    /* Grid styles */
    display: grid; /* changing the behavior of the .hero element to be a grid container. That means the elements inside .hero are now grid items. */
    align-items: center; /* vertically center the columns on our grid. But these two lines don’t do anything on their own until we set the columns of our grid on the line below. */
    grid-template-columns: repeat(auto-fit, minmax(650px, 1fr)); /* repeat(The number of times to repeat the value, the Value itself). The minmax() function - The *minimum* and *maximum* values we want these columns to be able to resize to. The auto-fit keyword allows us to wrap our columns into rows when there’s not enough space in our viewport to fit the 240px minimum */
}

.weathermaps {
    padding: 4rem 2rem;
    display: grid;
    align-items: center;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}