@import 'helpers';

/**
 * Flex grid
 */
.flex-grid-template {
  --grid-gap-x: 30px;
  --grid-gap-y: 30px;
  --grid-col: 3;

  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gap-y) var(--grid-gap-x);
}

.flex-grid-template > * {
  /* calculate new width */
  --grid-gap-x-total: calc(var(--grid-gap-x) * (var(--grid-col) - 1));
  --grid-space-each: calc(var(--grid-gap-x-total) / var(--grid-col));

  width: calc(100% / var(--grid-col) - var(--grid-space-each));
}

@media only screen and (max-width: map-get($breakpoints, "sm")) {
  .flex-grid-template {
    --grid-col: 2;
  }
}

@media only screen and (max-width: map-get($breakpoints, "xs")) {
  .flex-grid-template {
    --grid-col: 1;
  }
}

/**
 * Background object fit
 */
@mixin img-object-fit {
  object-position: center center;
  height: 100%;
  width: 100%;
  min-height: 100%;
  min-width: 100%;
  max-height: 100%;
  max-width: 100%;
  display: block;
}

.img-wrapper-cover  img {
  @include img-object-fit;
  object-fit: cover;
}

.img-wrapper-contain  img {
  @include img-object-fit;
  object-fit: contain;
}

/**
 * Clear list style
 */

// for the ul itself
ul.list-style-none,

// for the ul inside
.list-style-none ul {
  margin: 0;
  list-style: none;
}

ul.list-style-none > li,
.list-style-none ul > li {
  padding: 0;
}


/*
 * Visually hidden
 * https://www.joshwcomeau.com/snippets/react-components/visually-hidden/
 */
.visually-hidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}