Box.module.css

.box {
  box-sizing: border-box;
}

.flexnone {
  flex: 0 0 auto;
}

.flexgrow {
  flex: 1 1 auto;
}

.flexWrap {
  flex-wrap: wrap;
}

/* Align items */
.alignItemscenter {
  align-items: center;
}

.alignItemsstart {
  align-items: flex-start;
}

.alignItemsend {
  align-items: flex-end;
}

.alignItemsstretch {
  align-items: stretch;
}

.alignItemsbaseline {
  align-items: baseline;
}

/* Align items (small and up) */
@media (min-width: 480px) {
  .alignItemscenterSmall {
    align-items: center;
  }

  .alignItemsstartSmall {
    align-items: flex-start;
  }

  .alignItemsendSmall {
    align-items: flex-end;
  }

  .alignItemsstretchSmall {
    align-items: stretch;
  }

  .alignItemsbaselineSmall {
    align-items: baseline;
  }
}

/* Align items (large and up) */
@media (min-width: 960px) {
  .alignItemscenterLarge {
    align-items: center;
  }

  .alignItemsstartLarge {
    align-items: flex-start;
  }

  .alignItemsendLarge {
    align-items: flex-end;
  }

  .alignItemsstretchLarge {
    align-items: stretch;
  }

  .alignItemsbaselineLarge {
    align-items: baseline;
  }
}

/* Align self */
.alignSelfcenter {
  align-self: center;
}

.alignSelfstart {
  align-self: flex-start;
}

.alignSelfend {
  align-self: flex-end;
}

.alignSelfstretch {
  align-self: stretch;
}

.alignSelfbaseline {
  align-self: baseline;
}

.alignSelfauto {
  align-self: auto;
}

/* Display (base) */
.block {
  display: block;
}

.flex {
  display: flex;
}

.inlineBlock {
  display: inline-block;
}

.inlineFlex {
  display: inline-flex;
}

.none {
  display: none;
}

.visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin-bottom: -1px;
  border: 0;
  padding-left: 0;
  padding-right: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
}

/* Display (small and up) */
@media (min-width: 480px) {
  .blockSmall {
    display: block;
  }

  .flexSmall {
    display: flex;
  }

  .inlineBlockSmall {
    display: inline-block;
  }

  .inlineFlexSmall {
    display: inline-flex;
  }

  .noneSmall {
    display: none;
  }

  .visuallyHiddenSmall {
    position: absolute;
    width: 1px;
    height: 1px;
    margin-bottom: -1px;
    border: 0;
    padding-left: 0;
    padding-right: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
  }
}

/* Display (large and up) */
@media (min-width: 960px) {
  .blockLarge {
    display: block;
  }

  .flexLarge {
    display: flex;
  }

  .inlineBlockLarge {
    display: inline-block;
  }

  .inlineFlexLarge {
    display: inline-flex;
  }

  .noneLarge {
    display: none;
  }

  .visuallyHiddenLarge {
    position: absolute;
    width: 1px;
    height: 1px;
    margin-bottom: -1px;
    border: 0;
    padding-left: 0;
    padding-right: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
  }
}

/* Direction */
.column {
  flex-direction: column;
}

.row {
  flex-direction: row;
}

/* Direction (small and up) */
@media (min-width: 480px) {
  .columnSmall {
    flex-direction: column;
  }

  .rowSmall {
    flex-direction: row;
  }
}

/* Direction (large and up) */
@media (min-width: 960px) {
  .columnLarge {
    flex-direction: column;
  }

  .rowLarge {
    flex-direction: row;
  }
}

/* Gap */
.gap0 {
  gap: 0;
}

.gap1 {
  gap: 4px;
}

.gap2 {
  gap: 8px;
}

.gap3 {
  gap: 12px;
}

.gap4 {
  gap: 16px;
}

.gap5 {
  gap: 20px;
}

.gap6 {
  gap: 24px;
}

.gap7 {
  gap: 28px;
}

.gap8 {
  gap: 32px;
}

.gap9 {
  gap: 36px;
}

.gap10 {
  gap: 40px;
}

.gap11 {
  gap: 44px;
}

.gap12 {
  gap: 48px;
}

/* Justify content */
.justifyContentcenter {
  justify-content: center;
}

.justifyContentstart {
  justify-content: flex-start;
}

.justifyContentend {
  justify-content: flex-end;
}

.justifyContentbetween {
  justify-content: space-between;
}

.justifyContentaround {
  justify-content: space-around;
}

.justifyContentevenly {
  justify-content: space-evenly;
}

/* Justify content (small and up) */
@media (min-width: 480px) {
  .justifyContentcenterSmall {
    justify-content: center;
  }

  .justifyContentstartSmall {
    justify-content: flex-start;
  }

  .justifyContentendSmall {
    justify-content: flex-end;
  }

  .justifyContentbetweenSmall {
    justify-content: space-between;
  }

  .justifyContentaroundSmall {
    justify-content: space-around;
  }

  .justifyContentevenlySmall {
    justify-content: space-evenly;
  }
}

/* Justify content (large and up) */
@media (min-width: 960px) {
  .justifyContentcenterLarge {
    justify-content: center;
  }

  .justifyContentstartLarge {
    justify-content: flex-start;
  }

  .justifyContentendLarge {
    justify-content: flex-end;
  }

  .justifyContentbetweenLarge {
    justify-content: space-between;
  }

  .justifyContentaroundLarge {
    justify-content: space-around;
  }

  .justifyContentevenlyLarge {
    justify-content: space-evenly;
  }
}

/* Overflow */
.overflowvisible {
  overflow: visible;
}

.overflowhidden {
  overflow: hidden;
}

.overflowscroll {
  overflow: scroll;
}

.overflowauto {
  overflow: auto;
}

.overflowinherit {
  overflow: inherit;
}

.overflowinitial {
  overflow: initial;
}

.overflowXvisible {
  overflow-x: visible;
}

.overflowXhidden {
  overflow-x: hidden;
}

.overflowXscroll {
  overflow-x: scroll;
}

.overflowXauto {
  overflow-x: auto;
}

.overflowXinherit {
  overflow-x: inherit;
}

.overflowXinitial {
  overflow-x: initial;
}

.overflowYvisible {
  overflow-y: visible;
}

.overflowYhidden {
  overflow-y: hidden;
}

.overflowYscroll {
  overflow-y: scroll;
}

.overflowYauto {
  overflow-y: auto;
}

.overflowYinherit {
  overflow-y: inherit;
}

.overflowYinitial {
  overflow-y: initial;
}

/* Position */
.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}