/* Container padrão */
.container {
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}

/* Container com larguras máximas responsivas */
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 800px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

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

/* Container 100% fluido */
.container-fluid {
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}

/* Containers específicos por breakpoint (opcional) */
@media (min-width: 576px) {
  .container-sm {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container-md {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container-lg {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container-xl {
    max-width: 1140px;
  }
}

@media (min-width: 1400px) {
  .container-xxl {
    max-width: 1320px;
  }
}


/* Linha */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

/* Coluna básica */
.col {
  flex: 1 0 0%;
  padding-left: 15px;
  padding-right: 15px;
}

/* Geração de colunas e offsets para diferentes tamanhos */
:root {
  --columns: 12;
}

/* Função de utilidade para gerar colunas */
@media all {
  /* Default (xs) */
  .col-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
  .col-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .col-3 { flex: 0 0 25%; max-width: 25%; }
  .col-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .col-6 { flex: 0 0 50%; max-width: 50%; }
  .col-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .col-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .col-9 { flex: 0 0 75%; max-width: 75%; }
  .col-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .col-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
  .col-12 { flex: 0 0 100%; max-width: 100%; margin-bottom: 2rem; }

  /* Offsets */
  .offset-1 { margin-left: 8.3333%; }
  .offset-2 { margin-left: 16.6667%; }
  .offset-3 { margin-left: 25%; }
  .offset-4 { margin-left: 33.3333%; }
  .offset-5 { margin-left: 41.6667%; }
  .offset-6 { margin-left: 50%; }
  .offset-7 { margin-left: 58.3333%; }
  .offset-8 { margin-left: 66.6667%; }
  .offset-9 { margin-left: 75%; }
  .offset-10 { margin-left: 83.3333%; }
  .offset-11 { margin-left: 91.6667%; }
}

/* SM ≥ 576px */
@media (min-width: 576px) {
  .col-sm-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
  .col-sm-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .col-sm-3 { flex: 0 0 25%; max-width: 25%; }
  .col-sm-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-sm-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
  .col-sm-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .col-sm-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .col-sm-9 { flex: 0 0 75%; max-width: 75%; }
  .col-sm-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .col-sm-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
  .col-sm-12 { flex: 0 0 100%; max-width: 100%; }

  .offset-sm-1 { margin-left: 8.3333%; }
  .offset-sm-2 { margin-left: 16.6667%; }
  .offset-sm-3 { margin-left: 25%; }
  .offset-sm-4 { margin-left: 33.3333%; }
  .offset-sm-5 { margin-left: 41.6667%; }
  .offset-sm-6 { margin-left: 50%; }
  .offset-sm-7 { margin-left: 58.3333%; }
  .offset-sm-8 { margin-left: 66.6667%; }
  .offset-sm-9 { margin-left: 75%; }
  .offset-sm-10 { margin-left: 83.3333%; }
  .offset-sm-11 { margin-left: 91.6667%; }
}

/* MD ≥ 768px */
@media (min-width: 768px) {
  .col-md-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
  .col-md-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .col-md-3 { flex: 0 0 25%; max-width: 25%; }
  .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-md-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .col-md-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .col-md-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .col-md-9 { flex: 0 0 75%; max-width: 75%; }
  .col-md-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .col-md-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
  .col-md-12 { flex: 0 0 100%; max-width: 100%;}

  .offset-md-1 { margin-left: 8.3333%; }
  .offset-md-2 { margin-left: 16.6667%; }
  .offset-md-3 { margin-left: 25%; }
  .offset-md-4 { margin-left: 33.3333%; }
  .offset-md-5 { margin-left: 41.6667%; }
  .offset-md-6 { margin-left: 50%; }
  .offset-md-7 { margin-left: 58.3333%; }
  .offset-md-8 { margin-left: 66.6667%; }
  .offset-md-9 { margin-left: 75%; }
  .offset-md-10 { margin-left: 83.3333%; }
  .offset-md-11 { margin-left: 91.6667%; }
}

/* LG ≥ 992px */
@media (min-width: 992px) {
  .col-lg-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
  .col-lg-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
  .col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-lg-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  .col-lg-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .col-lg-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .col-lg-9 { flex: 0 0 75%; max-width: 75%; }
  .col-lg-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .col-lg-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
  .col-lg-12 { flex: 0 0 100%; max-width: 100%; }

  .offset-lg-1 { margin-left: 8.3333%; }
  .offset-lg-2 { margin-left: 16.6667%; }
  .offset-lg-3 { margin-left: 25%; }
  .offset-lg-4 { margin-left: 33.3333%; }
  .offset-lg-5 { margin-left: 41.6667%; }
  .offset-lg-6 { margin-left: 50%; }
  .offset-lg-7 { margin-left: 58.3333%; }
  .offset-lg-8 { margin-left: 66.6667%; }
  .offset-lg-9 { margin-left: 75%; }
  .offset-lg-10 { margin-left: 83.3333%; }
  .offset-lg-11 { margin-left: 91.6667%; }
}