.main-container {

margin: $spacing-3;
@include on-desktop {
    margin: $spacing-4 $content-gutters-width;
}

}

.page-header {

margin: $spacing-3 0pt;
align-items: center;

@include with-theme {
    color: color-for(primary);
}

}

.page-actions {

flex: 0 1 auto;

}

.page-title {

margin: 0pt;
font-size: $mega-font-size;
@include with-theme {
    color: color-for(primary);
}

}

.page-subtitle {

margin: 0pt;
font-size: $medium-font-size;
font-weight: normal;
@include with-theme {
    color: color-for(secondary);
}

}

.index-grid {

display: grid;
grid-template-rows: auto;
grid-template-columns: 1fr;
gap: $spacing-3;

@include on-tablet {
    grid-template-rows: auto;
    grid-template-columns: repeat(2, 1fr);
}
@include on-desktop {
    grid-template-rows: auto;
    grid-template-columns: repeat(3, 1fr);
}

}

.snip {

display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: auto;

}

.snip-container {

margin: $spacing-1;

}

.snip-header {

display: flex;
flex-direction: column;

}

.snip-title, .snip-subtitle {

margin: 0pt;

} .snip-subtitle {

font-weight: normal;

}