42 lines
843 B
CSS
42 lines
843 B
CSS
body {
|
|
margin: auto;
|
|
background-color: #444444;
|
|
align-content: center;
|
|
}
|
|
.grid-item img {
|
|
display: inline-block;
|
|
width: 100%;
|
|
}
|
|
.title-wrapper{
|
|
text-align: center;
|
|
background-color: #000000;
|
|
}
|
|
.item-title {
|
|
color: #ffffff;
|
|
font-size: 1.5em;
|
|
text-transform: uppercase;
|
|
}
|
|
.grid-container { /* Default to single column for small screens */
|
|
margin: auto;
|
|
display: grid;
|
|
grid-template-columns: 100%;
|
|
grid-gap: 0.2em 0.2em;
|
|
}
|
|
@media only screen and (min-width: 40em){ /* screens >640px wide*/
|
|
.grid-container {
|
|
grid-template-columns: 49% 49%;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 78.75em){ /* screens >1260px wide */
|
|
.grid-container {
|
|
grid-template-columns: 33% 33% 33%;
|
|
}
|
|
.item-title {
|
|
font-size: 1.7em;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 118.75em){ /* screens >1900px wide */
|
|
.item-title {
|
|
font-size: 2.2em;
|
|
}
|
|
} |