frontend/assets/base-style.css

.center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.left-center {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
}

.right-center {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.stretch-center {
    display: flex;
    align-items: center;
    justify-content: stretch;
    gap: 0.5rem;
}

.left-top {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.5rem;
}

.center-top {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.center-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.top-center {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.spaced-top {
    display: flex;
    align-items: start;
    justify-content: space-between;
}

.spaced-center {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pointer {
    cursor: pointer;
}

.expand {
    height: 100%;
    width: 100%;
}

.content, *[class^='content-'], *[class*=' content-'] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.content, *[class^='content-'], *[class*=' content-'] > *:is(div, form, header, footer) {
    width: 100%;
    justify-self: stretch;
}
.content .full {
    width: 100%;
}
.content-s {
    gap: 0.25rem;
}
.content-m {
    gap: 0.5rem;
}
.content-l {
    gap: 1rem;
}
.content-xl {
    display: grid;
    gap: 2rem;
}

.content-2xl {
    gap: 3rem;
}

.content-3xl {
    gap: 4rem;
}

.padding-m {
    padding: 0.5rem;
}
.padding-l {
    padding: 1rem;
}
.padding-xl {
    padding: 2rem;
}

.narrow {
    width: min(100%, 1340px);
    padding: 0 0.5rem;
}
.narrow.s {
    width: min(100%, 320px);
}
.narrow.m {
    width: min(100%, 540px);
}
.narrow-b {
    width: min(100%, 740px);
}

.tile, *[class^='tile-'], *[class*=' tile-'] {
    background-color: var(--tile-color);
    border-radius: 0.25rem;
    overflow: hidden;
    width: 100%;
    border: 1px solid #cddaff;
}

.tile-s {
    padding: 0.25rem;
}

.tile-m {
    padding: 0.5rem;
}

.tile-l {
    padding: 1rem;
}

.tile-xl {
    padding: 2rem;
}

.col-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.col-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.col-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.col-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}

.grayed-out {
    color: #777777;
    font-size: 0.85rem;
}

.row_auto-1fr {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
}

.height_100 {
    height: 100%;
}

.gap-0 {
    gap: 0;
}

.gap-m {
    gap: 0.5rem;
}

.gap-l {
    gap: 1rem;
}

.column {
    flex-direction: column;
}

@media (max-width: 768px) {
    .col-1-m {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .col-2-m {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
    .col-3-m {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1rem;
    }
    .center-m {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}


.full_20rem {
    display: grid;
    grid-template-columns: 1fr 20rem;
    gap: 1rem;
}

.base-shape {
    height: 2.25rem;
    padding: 0.5rem;
}


.width-6rem {
    width: 6rem;
}

.nowrap {
    white-space: nowrap
}