/* SPACING & POSITIONING SYSTEM */
/* Sections are used to create sections of the page */
section {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
section.full-width {
max-width: 100%;
}
section.fixed-width {
max-width: 1920px;
}
section.full-height {
min-height: 100svh;
}
/* Containers are used to apply responsive global padding to elements grouped inside of sections */
.container {
max-width: 1512px;
padding: 0 var(--u-padding-xl);
}
/* Grids columns are used to position elements horizontally */
.grid-columns {
display: grid;
grid-template-columns: repeat(12, 1fr);
align-items: start;
}
/* Padding system is used for elements that need to have dynamic padding based on the screen size */
:root {
--u-padding-xl: 4rem;
--u-padding-lg: 3rem;
--u-padding-md: 2rem;
--u-padding-sm: 1rem;
--u-padding-xs: .5rem;
}
@media (max-width: 1024px) {
:root {
--u-padding-xl: 3rem;
--u-padding-lg: 2rem;
--u-padding-md: 1.5rem;
--u-padding-sm: 0.75rem;
--u-padding-xs: 0.375rem;
}
}
@media (max-width: 768px) {
:root {
--u-padding-xl: 2rem;
--u-padding-lg: 1.5rem;
--u-padding-md: 1rem;
--u-padding-sm: 0.5rem;
--u-padding-xs: 0.25rem;
}
}
@media (max-width: 480px) {
:root {
--u-padding-xl: 1rem;
--u-padding-lg: 0.75rem;
--u-padding-md: 0.5rem;
--u-padding-sm: 0.25rem;
--u-padding-xs: 0.125rem;
}
}