/* ==========================================================================
  Colors
  ========================================================================== */
/* Primary Color
  ========================================================================== */
/* Secondary Color
  ========================================================================== */
/* Monochrome
  ========================================================================== */
/* Specific colors
  ========================================================================== */
/* ==========================================================================
  Typography
  ========================================================================== */
/* Settings
  ========================================================================== */
/* Families
  ========================================================================== */
/* Weights
  ========================================================================== */
/* Heading
  ========================================================================== */
/* ==========================================================================
  Grid / Responsive
  ========================================================================== */
/* Breakpoints
  ========================================================================== */
/* Spacing
  ========================================================================== */
/* ==========================================================================
  Transitions
  ========================================================================== */
/* ==========================================================================
	Breakpoints
	========================================================================== */
/* ==========================================================================
	Sizes
	========================================================================== */
/* ==========================================================================
	Colors
	========================================================================== */
/* ==========================================================================
	Vertical Align
	========================================================================== */
/* ==========================================================================
	Text Align
	========================================================================== */
/* ==========================================================================
	Font Weight
	========================================================================== */
/* ==========================================================================
	Direction
	========================================================================== */
/* ==========================================================================
	Container
	========================================================================== */
/* ==========================================================================
	Grid
	========================================================================== */
/**
 * Returns opaque color
 * Ex.: opaque(#fff, rgba(0, 0, 0, .5)) => #808080
 */
.c-equipCards {
  --img-bottom-spacing: 11px;
  --subtitle-font-size: 10px;
  --subtitle-top-spacing: 4px;
  --model-font-size: 8px;
  --model-top-spacing: 16px;
  --img-max-height: 18vh;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.c-equipCards__img {
  border: 1px solid var(--black);
  margin-bottom: var(--img-bottom-spacing);
  padding: 10px;
}
.c-equipCards__img img {
  height: var(--img-max-height);
  max-height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}
.c-equipCards__content {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.c-equipCards__content--title h6 {
  transition: color cubic-bezier(0.43, 0.045, 0.1, 0.95) 0.3s;
}
.c-equipCards__content--subtitle {
  margin-top: var(--subtitle-top-spacing);
  margin-bottom: auto;
}
.c-equipCards__content--subtitle span {
  color: var(--primary);
  font-size: var(--subtitle-font-size);
  font-family: var(--font-secondary);
  font-weight: var(--font-extra-bold);
  letter-spacing: 0.2px;
  line-height: 1;
  text-transform: uppercase;
  transition: color cubic-bezier(0.43, 0.045, 0.1, 0.95) 0.3s;
}
.c-equipCards__content--model {
  margin-top: var(--model-top-spacing);
}
.c-equipCards__content--model span {
  color: var(--secondary);
  font-size: var(--model-font-size);
  font-family: var(--font-secondary);
  font-weight: var(--font-extra-bold);
  text-transform: uppercase;
}
.c-equipCards:hover .c-equipCards__content--subtitle span {
  color: var(--primary);
}
@media (min-width: 768px) {
  .c-equipCards {
    --img-bottom-spacing: 12px;
    --subtitle-font-size: 12px;
    --subtitle-top-spacing: 5px;
    --model-font-size: 9px;
    --model-top-spacing: 16px;
    --img-max-height: 18vh;
  }
}
@media (min-width: 991px) {
  .c-equipCards {
    --img-bottom-spacing: 13px;
    --subtitle-font-size: 14px;
    --subtitle-top-spacing: 6px;
    --model-top-spacing: 17px;
    --img-max-height: 30vh;
  }
}
@media (min-width: 1200px) {
  .c-equipCards {
    --subtitle-font-size: 15px;
    --model-font-size: 10px;
  }
  .c-equipCards:hover .c-equipCards__content--title h6 {
    color: var(--secondary);
  }
  .c-equipCards:hover .c-equipCards__content--subtitle span {
    color: var(--secondary);
  }
}
@media (min-width: 1450px) {
  .c-equipCards {
    --img-bottom-spacing: 14px;
    --subtitle-font-size: 16px;
    --subtitle-top-spacing: 7px;
    --model-font-size: 11px;
    --model-top-spacing: 18px;
    --img-max-height: 34vh;
  }
}
@media (min-width: 1650px) {
  .c-equipCards {
    --img-bottom-spacing: 15px;
    --subtitle-font-size: 17px;
    --subtitle-top-spacing: 8px;
    --model-font-size: 12px;
    --model-top-spacing: 20px;
    --img-max-height: 43vh;
  }
  .c-equipCards__content--model span {
    letter-spacing: 0.24px;
  }
}
/*# sourceMappingURL=equipment_cards.css.map */