/* Define custom breakpoints */
:root {
    --breakpoint-xs: 0;
    --breakpoint-sm: 500px;
    --breakpoint-md: 1201px;
    --breakpoint-lg: 1299px;
    --breakpoint-xl: 1300px;
    --breakpoint-xxl: 1600px;
}

/* Custom container widths */
.container {
    width: 100%;
    max-width: 100%;
}

@media (min-width: var(--breakpoint-sm)) {
    .container {
        max-width: 500px;
    }
}

@media (min-width: var(--breakpoint-md)) {
    .container {
        max-width: 750px;
    }
}

@media (min-width: var(--breakpoint-lg)) {
    .container {
        max-width: 1000px;
    }
}

@media (min-width: var(--breakpoint-xl)) {
    .container {
        max-width: 1300px;
    }
}

@media (min-width: var(--breakpoint-xxl)) {
    .container {
        max-width: 1600px;
    }
}

/* Custom grid overrides */
@media (min-width: var(--breakpoint-sm)) {
    .col-sm {
        flex: 0 0 auto;
        width: 50%;
    }
}

@media (min-width: var(--breakpoint-md)) {
    .col-md {
        width: 33.3333%;
    }
}

@media (min-width: var(--breakpoint-lg)) {
    .col-lg {
        width: 25%;
    }
}

@media (min-width: var(--breakpoint-xl)) {
    .col-xl {
        width: 20%;
    }
}

@media (min-width: var(--breakpoint-xxl)) {
    .col-xxl {
        width: 16.6667%;
    }
}

/* Override other Bootstrap components as needed */
/* Adjust typography */


/* Adjust other components as needed */