.photo-grid{columns:2;column-gap:10px}img{width:100%;height:auto;margin-bottom:10px}@media screen and (width>=576px){.photo-grid{columns:3;background-color:red}}@media screen and (width>=768px){.photo-grid{columns:3;background-color:beige}}@media screen and (width>=992px){.photo-grid{columns:4;background-color:silver}}@media screen and (width>=1200px){.photo-grid{background-color:green}}@media screen and (width>=1400px){.photo-grid{background-color:#ff0}}.container{position:relative}.container nav{z-index:100;background:0 0;border:1px solid #000;justify-content:space-between;align-items:center;width:100%;height:100px;padding:0 32px;display:flex;position:absolute;top:0}.container nav .logo{color:#000;border:5px solid #2f7de4;border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;font-size:3.2rem;font-weight:700;display:flex}.container nav ul{display:flex}.container nav ul li{margin:10px 15px;display:inline-block}.container nav ul li a{font-size:1.25rem;font-weight:800;position:relative}.container nav ul li a:after{content:"";background:#2f7de4;width:0;height:3px;transition:all .4s ease-in-out;position:absolute;bottom:-5px;left:0}.container nav ul li a:hover:after{width:100%}*{box-sizing:border-box;margin:0;padding:0;font-family:Arial,sans-serif}body{background-color:#0f0f0f;margin:auto}a{color:inherit;text-decoration:none}img{display:block}#header{background-position:50%;background-repeat:no-repeat;width:100%;height:100vh}