:root,
:host {
    --color-white: #fff;
    --spacing: 0.25rem;
}

.flex {
    display: flex;
}

.grid {
    display: grid;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.lg\:grid-cols-2 {
    @media (width >=64rem) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.gap-3 {
    gap: calc(var(--spacing) * 3);
}

.gap-5 {
    gap: calc(var(--spacing) * 5);
}

.gap-10 {
    gap: calc(var(--spacing) * 10);
}

.col-span-1 {
    grid-column: span 1 / span 1;
}

.col-span-12 {
    grid-column: span 12 / span 12;
}

.grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.md\:col-span-4 {
    @media (width >=48rem) {
        grid-column: span 4 / span 4;
    }
}

.md\:col-span-8 {
    @media (width >=48rem) {
        grid-column: span 8 / span 8;
    }
}

.xl\:col-span-3 {
    @media (width >=80rem) {
        grid-column: span 3 / span 3;
    }
}

.xl\:col-span-9 {
    @media (width >=80rem) {
        grid-column: span 9 / span 9;
    }
}

.columns-2 {
    columns: 2;
}

.md\:columns-3 {
    @media (width >=48rem) {
        columns: 3;
    }
}

.flex-col {
    flex-direction: column;
}

.md\:flex-row {
    @media (width >=48rem) {
        flex-direction: row;
    }
}

.text-center {
    text-align: center;
}

.mb-0 {
    margin-bottom: calc(var(--spacing) * 0);
}

.mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
}

.text-white {
    color: var(--color-white);
}

.hover\:text-white {
    &:hover {
        @media (hover: hover) {
            color: var(--color-white);
        }
    }
}