/**************************************************************************** * Containers. * ****************************************************************************/ .centered-container { width: 100%; text-align: center; margin-bottom: 0.5em; } .background { background-color: lightgray; } .image-container { height: 75vh; } /**************************************************************************** * Content. * ****************************************************************************/ .image { height: 100%; } /**************************************************************************** * Grid. * ****************************************************************************/ .grid-container { display: flex; flex: 1; } .grid { max-width: 1920px; margin: 0 auto; display: grid; grid-gap: 1rem; grid-template-rows: auto auto 1fr 1fr 1fr auto auto; } .grid-icon { text-align: center; } .column { flex-direction: column; text-align: center; border: black 1px solid; } /**************************************************************************** * Media queries. * ****************************************************************************/ @media (min-width: 700px) { .grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .grid { grid-template-columns: repeat(5, 1fr); } } @media (min-width: 1280px) { .grid { grid-template-columns: repeat(7, 1fr); } } @media (min-width: 1440px) { .grid { grid-template-columns: repeat(9, 1fr); } } @media (min-width: 1800px) { .grid { grid-template-columns: repeat(11, 1fr); } }