.grid-container { text-align: center; max-width: 120rem; margin: 0 auto; } .grid-item { position: relative; float: left; width: 30rem; min-width: 25rem; min-height: 25rem; padding-bottom: 30rem; } .grid-item-content { position: absolute; width: 100%; height: 100%; padding: 1rem; } .menu { display: flex; flex-flow: column; } .menu .logo { background-color: #E9E9E9; object-fit: contain; padding-top: 1em; min-height: 5rem; } .menu section { background-color: #E9E9E9; flex: 1; } .menu section aside { } .menu section .fuckcss { position: relative; height: 100%; } .menu section img { max-height: 100%; width: auto; } .menu footer { background-color: #E9E9E9; padding-bottom: 1rem; } .project { display: flex; flex-flow: column; } .project header { font-size: 2rem; line-height: 1.2; } .project section { min-height: 0; flex: 1; } .project.bottom section { flex-flow: column; display: flex; } .project.left section p { position: relative; top: 50%; transform: translateY(-50%); } .project.left section img { height: 100%; float: right; padding: 1rem; } .project.bottom section p { margin-bottom: 1rem; } .project.bottom section img { object-fit: contain; min-height: 0; padding: 1rem; } .photo a { display: block; position: relative; height: 100%; } .photo header { display: none; position: absolute; width: 100%; z-index: 2; background: rgba(0, 0, 0, 0.4); color: white; } .photo header { top: 0; font-size: 1.5rem; padding: 0.5rem; } .photo a:hover header { display: block; } .photo img { position: absolute; height: 100%; left: 0; } @media all and (max-width: 120rem) { .grid-item { width: 25%; padding-bottom: 25% } } @media all and (max-width: 102rem) { .grid-item { width: 33.33%; padding-bottom: 33.33%; } } @media all and (max-width: 76.5rem) { .grid-container { max-width: 68rem; } .grid-item { width: 50%; padding-bottom: 50%; } } @media all and (max-width: 51rem) { .grid-container { max-width: 34rem; } .grid-item { width: 100%; padding-bottom: 100%; margin-bottom: 1rem; } .menu { background-color: #E9E9E9; } .grid-item-content.photo { padding: 0; } .photo a header { display: block; } }