/* 
***************
Grid
***************
*/

:root {
  --columns: 2;
  --gap: 10px;
}

* {
  box-sizing: border-box;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  width: 100%;
}

.col {
  flex: 0 0 auto;
  box-sizing: border-box;
}

.col-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* Correctly calculated column widths considering the gap */
.col-1 {
  flex: 0 0
    calc(
      100% / var(--columns) * 1 -
        (var(--gap) * (var(--columns) - 1) / var(--columns))
    );
}
.col-2 {
  flex: 0 0
    calc(
      100% / var(--columns) * 2 -
        (var(--gap) * (var(--columns) - 2) / var(--columns))
    );
}


@media (max-width: 580px) {
  .col-1,
  .col-2 {
    flex: 0 0 calc(100%);
  }
}

/* 
  ***************
  End Grid
  ***************
  */