$col_gap: 1rem;

* {
  box-sizing: border-box;
}

p {
  margin: 0;
}

.container {
  padding: 1rem 0;
  max-width: 80ch;
  min-height: 100%;
  margin: 0 auto;
}

.column {
  margin: $col_gap;
  display: flex;
 
}

.element {
  padding: 0.5rem;
}

.flexbox {
  display: flex;
    height: 100%;
    min-height: 100%;
  }

  .col-3 {
   
    flex-wrap: wrap;

    .column {
      margin: $col_gap/2;
      max-width: calc((100% / 3) - #{$col_gap});
    }
  }
}

.grid {
  display: grid;
  grid-auto-flow: column;

 
    height: 100%;
  }

  &.col-3 {
    grid-gap: $col_gap;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: unset;

    .column {
      margin: 0;
    }
  }
}.highlighted {
  background-color: #ffffff;
  flex: 1;
  height: 100%;
  position: relative;
}

.highlighted:hover {
  background: linear-gradient(90deg, #00ffed, #69e0ff) 50%;
}