/*
 * Grid system inspired by Skeleton V1.2
 * Original by Dave Gamache — www.getskeleton.com
 * Rewritten in Flexbox by StudioCamCam, 2025
 * Licensed under MIT (https://opensource.org/licenses/MIT)
 */

/* #Base 960 Grid
================================================== */

.container {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  box-sizing: border-box;
}

.container .column,
.container .columns {
  flex-grow: 0;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* Full row wrapper */
.row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 20px;
}

/* Columns width (out of 16 columns) */
.one.columns    { width: 6.25%; }
.two.columns    { width: 12.5%; }
.three.columns  { width: 18.75%; }
.four.columns   { width: 25%; }
.five.columns   { width: 31.25%; }
.six.columns    { width: 37.5%; }
.seven.columns  { width: 43.75%; }
.eight.columns  { width: 50%; }
.nine.columns   { width: 56.25%; }
.ten.columns    { width: 62.5%; }
.eleven.columns { width: 68.75%; }
.twelve.columns { width: 75%; }
.thirteen.columns { width: 81.25%; }
.fourteen.columns { width: 87.5%; }
.fifteen.columns { width: 93.75%; }
.sixteen.columns { width: 100%; }

/* Fractional column alternatives */
.one-third.column { width: 33.3333%; }
.two-thirds.column { width: 66.6667%; }

/* Offsets */
.offset-by-one    { margin-left: 6.25%; }
.offset-by-two    { margin-left: 12.5%; }
.offset-by-three  { margin-left: 18.75%; }
.offset-by-four   { margin-left: 25%; }
.offset-by-five   { margin-left: 31.25%; }
.offset-by-six    { margin-left: 37.5%; }
.offset-by-seven  { margin-left: 43.75%; }
.offset-by-eight  { margin-left: 50%; }
.offset-by-nine   { margin-left: 56.25%; }
.offset-by-ten    { margin-left: 62.5%; }
.offset-by-eleven { margin-left: 68.75%; }
.offset-by-twelve { margin-left: 75%; }
.offset-by-thirteen { margin-left: 81.25%; }
.offset-by-fourteen { margin-left: 87.5%; }
.offset-by-fifteen { margin-left: 93.75%; }

/* Responsive overrides */
@media screen and (max-width: 960px) {
  .container {
    flex-direction: column;
    padding: 0 5%;
  }
  .container .column,
  .container .columns {
    width: 100% !important;
  }
  [class*="offset-by-"] {
    margin-left: 0 !important;
  }
}

/* Clearfix utility */
.clearfix::before,
.clearfix::after,
.row::before,
.row::after {
  content: "";
  display: table;
}

.clearfix::after,
.row::after {
  clear: both;
}

.clear {
  clear: both;
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}