/* Flex grid */
.main-page-grid-row {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
.main-page-grid-item {
width: min-content;
height: 100%;
flex: 0 33.33%;
position: relative;
padding: 10px;
box-sizing: border-box;
}
.flex-size-4 {
flex: 0 25%;
}
.main-page-card {
height: 100%;
width: 100%;
border: 1px solid var(--border-color-base);
border-radius: var(--border-radius--large);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
background-color: var(--color-surface-0);
padding: 20px;
box-sizing: border-box;
overflow: hidden;
}
@media(max-width: 815px) {
.main-page-grid-item {
flex-basis: 50%;
}
.flex-size-4 {
flex: 0 50%;
}
}
@media(max-width: 555px) {
.main-page-grid-item {
flex-basis: 100%;
}
.flex-size-4 {
flex: 0 100%;
}
}