@use './core' as *;

.layout-grid {
    display: flex;
    gap: var(--layout-gap);
    flex-wrap: wrap;
    width: 100%;
    max-width: min(calc(100% - var(--layout-horizontal-margins) * 2), var(--layout-max-width));
    margin-right: auto;
    margin-left: auto;
}

.layout-page-max-width {
    width: 100%;
    max-width: min(calc(100% - var(--layout-horizontal-margins) * 2), var(--layout-max-width));
    margin-right: auto;
    margin-left: auto;
}

.layout-max-width-small {
    width: 100%;
    max-width: var(--layout-max-width-small);
    padding-left: var(--layout-horizontal-margins);
    padding-right: var(--layout-horizontal-margins);
    margin-right: auto;
    margin-left: auto;
}

.column-1-4 {
    width: var(--layout-width-1-4);
}

.column-2-4 {
    width: var(--layout-width-2-4);
}

.column-3-4 {
    width: var(--layout-width-3-4);
}

.column-4-4 {
    width: 100%;
}

.column-1-6 {
    width: var(--layout-width-1-6);
}

.column-2-6 {
    width: var(--layout-width-2-6);
}

.column-3-6 {
    width: var(--layout-width-3-6);
}

.column-4-6 {
    width: var(--layout-width-4-6);
}

.column-5-6 {
    width: var(--layout-width-5-6);
}

.column-6-6 {
    width: 100%;
}

.column-1-12 {
    width: var(--layout-width-1-12);
}

.column-2-12 {
    width: var(--layout-width-2-12);
}

.column-3-12 {
    width: var(--layout-width-3-12);
}

.column-4-12 {
    width: var(--layout-width-4-12);
}

.column-5-12 {
    width: var(--layout-width-5-12);
}

.column-6-12 {
    width: var(--layout-width-6-12);
}

.column-7-12 {
    width: var(--layout-width-7-12);
}

.column-8-12 {
    width: var(--layout-width-8-12);
}

.column-9-12 {
    width: var(--layout-width-9-12);
}

.column-10-12 {
    width: var(--layout-width-10-12);
}

.column-11-12 {
    width: var(--layout-width-11-12);
}

.column-12-12 {
    width: 100%;
}
