93 lines
2.0 KiB
CSS
93 lines
2.0 KiB
CSS
/****************************************************************************
|
|
* 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);
|
|
}
|
|
}
|