* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Container */
.pb-container {
    width: 100%;
    max-width: var(--container-width, 1200px);
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* Grid System */
.pb-row {
    --gap: 15px;
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(-1 * var(--gap));
    margin-left: calc(-1 * var(--gap));
}
.pb-row.g-5 {
    --gap: 5px;
}
.pb-row.g-10 {
    --gap: 10px;
}

[class*="pb-col-"] {
    padding-right: var(--gap);
    padding-left: var(--gap);
}

.pb-hide {
    display: none;
}

/* Column Widths (default to 12 columns) */
.pb-col-1  { flex: 0 0 8.33%; max-width: 8.33%; }
.pb-col-2  { flex: 0 0 16.66%; max-width: 16.66%; }
.pb-col-3  { flex: 0 0 25%; max-width: 25%; }
.pb-col-4  { flex: 0 0 33.33%; max-width: 33.33%; }
.pb-col-5  { flex: 0 0 41.66%; max-width: 41.66%; }
.pb-col-6  { flex: 0 0 50%; max-width: 50%; }
.pb-col-7  { flex: 0 0 58.33%; max-width: 58.33%; }
.pb-col-8  { flex: 0 0 66.66%; max-width: 66.66%; }
.pb-col-9  { flex: 0 0 75%; max-width: 75%; }
.pb-col-10 { flex: 0 0 83.33%; max-width: 83.33%; }
.pb-col-11 { flex: 0 0 91.66%; max-width: 91.66%; }
.pb-col-12 { flex: 0 0 100%; max-width: 100%; }

/* Responsive Breakpoints */

/* Small devices (576px and up) */
@media (min-width: 576px) {
    .pb-col-sm-1  { flex: 0 0 8.33%; max-width: 8.33%; }
    .pb-col-sm-2  { flex: 0 0 16.66%; max-width: 16.66%; }
    .pb-col-sm-3  { flex: 0 0 25%; max-width: 25%; }
    .pb-col-sm-4  { flex: 0 0 33.33%; max-width: 33.33%; }
    .pb-col-sm-5  { flex: 0 0 41.66%; max-width: 41.66%; }
    .pb-col-sm-6  { flex: 0 0 50%; max-width: 50%; }
    .pb-col-sm-7  { flex: 0 0 58.33%; max-width: 58.33%; }
    .pb-col-sm-8  { flex: 0 0 66.66%; max-width: 66.66%; }
    .pb-col-sm-9  { flex: 0 0 75%; max-width: 75%; }
    .pb-col-sm-10 { flex: 0 0 83.33%; max-width: 83.33%; }
    .pb-col-sm-11 { flex: 0 0 91.66%; max-width: 91.66%; }
    .pb-col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Medium devices (768px and up) */
@media (min-width: 769px) {
    .pb-col-md-1  { flex: 0 0 8.33%; max-width: 8.33%; }
    .pb-col-md-2  { flex: 0 0 16.66%; max-width: 16.66%; }
    .pb-col-md-3  { flex: 0 0 25%; max-width: 25%; }
    .pb-col-md-4  { flex: 0 0 33.33%; max-width: 33.33%; }
    .pb-col-md-5  { flex: 0 0 41.66%; max-width: 41.66%; }
    .pb-col-md-6  { flex: 0 0 50%; max-width: 50%; }
    .pb-col-md-7  { flex: 0 0 58.33%; max-width: 58.33%; }
    .pb-col-md-8  { flex: 0 0 66.66%; max-width: 66.66%; }
    .pb-col-md-9  { flex: 0 0 75%; max-width: 75%; }
    .pb-col-md-10 { flex: 0 0 83.33%; max-width: 83.33%; }
    .pb-col-md-11 { flex: 0 0 91.66%; max-width: 91.66%; }
    .pb-col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Large devices (992px and up) */
@media (min-width: 992px) {
    .pb-col-lg-1  { flex: 0 0 8.33%; max-width: 8.33%; }
    .pb-col-lg-2  { flex: 0 0 16.66%; max-width: 16.66%; }
    .pb-col-lg-3  { flex: 0 0 25%; max-width: 25%; }
    .pb-col-lg-4  { flex: 0 0 33.33%; max-width: 33.33%; }
    .pb-col-lg-5  { flex: 0 0 41.66%; max-width: 41.66%; }
    .pb-col-lg-6  { flex: 0 0 50%; max-width: 50%; }
    .pb-col-lg-7  { flex: 0 0 58.33%; max-width: 58.33%; }
    .pb-col-lg-8  { flex: 0 0 66.66%; max-width: 66.66%; }
    .pb-col-lg-9  { flex: 0 0 75%; max-width: 75%; }
    .pb-col-lg-10 { flex: 0 0 83.33%; max-width: 83.33%; }
    .pb-col-lg-11 { flex: 0 0 91.66%; max-width: 91.66%; }
    .pb-col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Hide on Large Devices (992px and up) */
@media (min-width: 992px) {
    .pb-hide-lg {
        display: none;
    }

    .pb-show-lg {
        display: flex;
    }
}

/* Hide on Medium Devices (768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .pb-hide-md {
        display: none;
    }

    .pb-show-md {
        display: flex;
    }
}

/* Hide on Small Devices (576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .pb-hide-sm {
        display: none;
    }

    .pb-show-sm {
        display: flex;
    }
}