.counter-container {
  display: block;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.counter-container[type="1"] {
  padding: var(--counter-type-1--padding, var(--counter-padding, 0));
}
.counter-container[type="1"] .counter-icon {
  display: var(--counter-type-1-icon-display, var(--counter-icon-display, block));
  margin: var(--counter-type-1-icon-margin, var(--counter-icon-margin, 0 auto));
  position: var(--counter-type-1-icon-position, var(--counter-icon-position, relative));
  top: var(--counter-type-1-icon-top, var(--counter-icon-top, 0));
  left: var(--counter-type-1-icon-left, var(--counter-icon-left, 0));
  width: var(--counter-type-1-icon-width, var(--counter-icon-width, auto));
  height: var(--counter-type-1-icon-height, var(--counter-icon-height, auto));
  transform: var(--counter-type-1-icon-transform, var(--counter-icon-transform, none));
  z-index: var(--counter-type-1-icon-z-index, var(--counter-icon-z-index, 0));
  max-width: var(--counter-type-1-icon-max-width, var(--counter-icon-max-width, 100%));
}
.counter-container[type="1"] .counter-main {
  display: var(--counter-type-1-main-display, var(--counter-main-display, flex));
  flex-direction: var(--counter-type-1-main-flex-direction, var(--counter-main-flex-direction, column));
  justify-content: var(--counter-type-1-main-justify-content, var(--counter-main-justify-content, center));
  align-items: var(--counter-type-1-main-align-items, var(--counter-main-align-items, baseline));
}
.counter-container[type="1"] .counter-number {
  border: var(--counter-type-1-number-border, var(--counter-number-border, none));
  width: var(--counter-type-1-number-width, var(--counter-number-width, 100%));
  background-color: var(--counter-type-1-number-background-color, var(--counter-number-background-color, none));
  border-radius: var(--counter-type-1-number-border-radius, var(--counter-number-border-radius, 0));
  text-align: var(--counter-type-1-number-text-align, var(--counter-number-text-align, center));
  color: var(--counter-type-1-number-color, var(--counter-number-color, var(--h2-color)));
  font-size: var(--counter-type-1-number-font-size, var(--counter-number-font-size, var(--h2-font-size)));
  line-height: var(--counter-type-1-number-line-height, var(--counter-number-line-height, var(--h2-line-height)));
}
.counter-container[type="1"] .counter-title {
  border: var(--counter-type-1-title-border, var(--counter-title-border, none));
  width: var(--counter-type-1-title-width, var(--counter-title-width, 100%));
  background-color: var(--counter-type-1-title-background-color, var(--counter-title-background-color, none));
  border-radius: var(--counter-type-1-title-border-radius, var(--counter-title-border-radius, 0));
  text-align: var(--counter-type-1-title-text-align, var(--counter-title-text-align, center));
  color: var(--counter-type-1-title-color, var(--counter-title-color, var(--h3-color)));
  font-size: var(--counter-type-1-title-font-size, var(--counter-title-font-size, var(--h3-font-size)));
  line-height: var(--counter-type-1-title-line-height, var(--counter-title-line-height, var(--h3-line-height)));
}
.counter-container[type="1"] .counter-description {
  border: var(--counter-type-1-description-border, var(--counter-description-border, none));
  width: var(--counter-type-1-description-width, var(--counter-description-width, 100%));
  background-color: var(--counter-type-1-description-background-color, var(--counter-description-background-color, none));
  border-radius: var(--counter-type-1-description-border-radius, var(--counter-description-border-radius, 0));
  text-align: var(--counter-type-1-description-text-align, var(--counter-description-text-align, center));
  color: var(--counter-type-1-description-color, var(--counter-description-color, var(--p-color)));
  font-size: var(--counter-type-1-description-font-size, var(--counter-description-font-size, var(--p-font-size)));
  line-height: var(--counter-type-1-description-line-height, var(--counter-description-line-height, var(--p-line-height)));
}
.counter-container[type="1"] .counter-number,
.counter-container[type="1"] .counter-title,
.counter-container[type="1"] .counter-description {
  display: block;
}
.counter-container[type="2"] {
  padding: var(--counter-type-2--padding, var(--counter-padding, 0));
}
.counter-container[type="2"] .counter-icon {
  display: var(--counter-type-2-icon-display, var(--counter-icon-display, block));
  margin: var(--counter-type-2-icon-margin, var(--counter-icon-margin, 0 auto));
  position: var(--counter-type-2-icon-position, var(--counter-icon-position, relative));
  top: var(--counter-type-2-icon-top, var(--counter-icon-top, 0));
  left: var(--counter-type-2-icon-left, var(--counter-icon-left, 0));
  width: var(--counter-type-2-icon-width, var(--counter-icon-width, auto));
  height: var(--counter-type-2-icon-height, var(--counter-icon-height, auto));
  transform: var(--counter-type-2-icon-transform, var(--counter-icon-transform, none));
  z-index: var(--counter-type-2-icon-z-index, var(--counter-icon-z-index, 0));
  max-width: var(--counter-type-2-icon-max-width, var(--counter-icon-max-width, 100%));
}
.counter-container[type="2"] .counter-main {
  display: var(--counter-type-2-main-display, var(--counter-main-display, flex));
  flex-direction: var(--counter-type-2-main-flex-direction, var(--counter-main-flex-direction, row));
  justify-content: var(--counter-type-2-main-justify-content, var(--counter-main-justify-content, center));
  align-items: var(--counter-type-2-main-align-items, var(--counter-main-align-items, baseline));
  margin: var(--counter-type-2-main-margin, var(--counter-main-margin, 0));
  position: var(--counter-type-2-main-position, var(--counter-main-position, relative));
  z-index: 100;
}
.counter-container[type="2"] .counter-number {
  border: var(--counter-type-2-number-border, var(--counter-number-border, none));
  width: var(--counter-type-2-number-width, var(--counter-number-width, auto));
  background-color: var(--counter-type-2-number-background-color, var(--counter-number-background-color, none));
  border-radius: var(--counter-type-2-number-border-radius, var(--counter-number-border-radius, 0));
  text-align: var(--counter-type-2-number-text-align, var(--counter-number-text-align, center));
  color: var(--counter-type-2-number-color, var(--counter-number-color, var(--h2-color)));
  font-size: var(--counter-type-2-number-font-size, var(--counter-number-font-size, var(--h2-font-size)));
  font-weight: var(--counter-type-2-number-font-weight, var(--counter-number-font-weight, var(--h2-font-weight)));
  line-height: var(--counter-type-2-number-line-height, var(--counter-number-line-height, var(--h2-line-height)));
  margin: var(--counter-type-2-number-margin, var(--counter-number-margin, 0));
  padding: var(--counter-type-2-number-padding, var(--counter-number-padding, 0));
}
.counter-container[type="2"] .counter-title {
  border: var(--counter-type-2-title-border, var(--counter-title-border, none));
  width: var(--counter-type-2-title-width, var(--counter-title-width, auto));
  background-color: var(--counter-type-2-title-background-color, var(--counter-title-background-color, none));
  border-radius: var(--counter-type-2-title-border-radius, var(--counter-title-border-radius, 0));
  text-align: var(--counter-type-2-title-text-align, var(--counter-title-text-align, center));
  color: var(--counter-type-2-title-color, var(--counter-title-color, var(--h3-color)));
  font-size: var(--counter-type-2-title-font-size, var(--counter-title-font-size, var(--h3-font-size)));
  font-weight: var(--counter-type-2-title-font-weight, var(--counter-title-font-weight, var(--h3-font-weight)));
  line-height: var(--counter-type-2-title-line-height, var(--counter-title-line-height, var(--h3-line-height)));
  margin: var(--counter-type-2-title-margin, var(--counter-title-margin, 0));
}
.counter-container[type="2"] .counter-description {
  border: var(--counter-type-2-description-border, var(--counter-description-border, none));
  width: var(--counter-type-2-description-width, var(--counter-description-width, 100%));
  background-color: var(--counter-type-2-description-background-color, var(--counter-description-background-color, none));
  border-radius: var(--counter-type-2-description-border-radius, var(--counter-description-border-radius, 0));
  text-align: var(--counter-type-2-description-text-align, var(--counter-description-text-align, center));
  color: var(--counter-type-2-description-color, var(--counter-description-color, var(--p-color)));
  font-size: var(--counter-type-2-description-font-size, var(--counter-description-font-size, var(--p-font-size)));
  line-height: var(--counter-type-2-description-line-height, var(--counter-description-line-height, var(--p-line-height)));
  margin: var(--counter-type-2-description-margin, var(--counter-description-margin, 0));
}
.counter-container[type="2"] .counter-number,
.counter-container[type="2"] .counter-title,
.counter-container[type="2"] .counter-description {
  display: block;
}
.counter-container[type="3"] {
  padding: var(--counter-type-1--padding, var(--counter-padding, var(--global-padding)));
}
.counter-container[type="3"] .counter-icon {
  display: var(--counter-type-3-icon-display, var(--counter-icon-display, block));
  margin: var(--counter-type-3-icon-margin, var(--counter-icon-margin, 0 auto));
  position: var(--counter-type-3-icon-position, var(--counter-icon-position, absolute));
  top: var(--counter-type-3-icon-top, var(--counter-icon-top, 50%));
  left: var(--counter-type-3-icon-left, var(--counter-icon-left, 50%));
  width: var(--counter-type-3-icon-width, var(--counter-icon-width, auto));
  height: var(--counter-type-3-icon-height, var(--counter-icon-height, auto));
  transform: var(--counter-type-3-icon-transform, var(--counter-icon-transform, translate(-50%, -50%)));
  z-index: var(--counter-type-3-icon-z-index, var(--counter-icon-z-index, -1));
  max-width: var(--counter-type-3-icon-max-width, var(--counter-icon-max-width, none));
}
.counter-container[type="3"] .counter-main {
  display: var(--counter-type-3-main-display, var(--counter-main-display, flex));
  flex-direction: var(--counter-type-3-main-flex-direction, var(--counter-main-flex-direction, row));
  justify-content: var(--counter-type-3-main-justify-content, var(--counter-main-justify-content, center));
  align-items: var(--counter-type-3-main-align-items, var(--counter-main-align-items, baseline));
}
.counter-container[type="3"] .counter-number {
  border: var(--counter-type-3-number-border, var(--counter-number-border, none));
  width: var(--counter-type-3-number-width, var(--counter-number-width, auto));
  background-color: var(--counter-type-3-number-background-color, var(--counter-number-background-color, none));
  border-radius: var(--counter-type-3-number-border-radius, var(--counter-number-border-radius, 0));
  text-align: var(--counter-type-3-number-text-align, var(--counter-number-text-align, center));
  color: var(--counter-type-3-number-color, var(--counter-number-color, var(--h2-color)));
  font-size: var(--counter-type-3-number-font-size, var(--counter-number-font-size, var(--h2-font-size)));
  line-height: var(--counter-type-3-number-line-height, var(--counter-number-line-height, var(--h2-line-height)));
}
.counter-container[type="3"] .counter-title {
  border: var(--counter-type-3-title-border, var(--counter-title-border, none));
  width: var(--counter-type-3-title-width, var(--counter-title-width, auto));
  background-color: var(--counter-type-3-title-background-color, var(--counter-title-background-color, none));
  border-radius: var(--counter-type-3-title-border-radius, var(--counter-title-border-radius, 0));
  text-align: var(--counter-type-3-title-text-align, var(--counter-title-text-align, center));
  color: var(--counter-type-3-title-color, var(--counter-title-color, var(--h3-color)));
  font-size: var(--counter-type-3-title-font-size, var(--counter-title-font-size, var(--h3-font-size)));
  line-height: var(--counter-type-3-title-line-height, var(--counter-title-line-height, var(--h3-line-height)));
}
.counter-container[type="3"] .counter-description {
  border: var(--counter-type-3-description-border, var(--counter-description-border, none));
  width: var(--counter-type-3-description-width, var(--counter-description-width, 100%));
  background-color: var(--counter-type-3-description-background-color, var(--counter-description-background-color, none));
  border-radius: var(--counter-type-3-description-border-radius, var(--counter-description-border-radius, 0));
  text-align: var(--counter-type-3-description-text-align, var(--counter-description-text-align, center));
  color: var(--counter-type-3-description-color, var(--counter-description-color, var(--p-color)));
  font-size: var(--counter-type-3-description-font-size, var(--counter-description-font-size, var(--p-font-size)));
  line-height: var(--counter-type-3-description-line-height, var(--counter-description-line-height, var(--p-line-height)));
}
.counter-container[type="3"]:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--counter-type-3-background-color, var(--counter-background-color, var(--grey-light)));
  opacity: var(--counter-type-3-background-opacity, var(--counter-background-opacity, 0.75));
  z-index: -1;
}
.counter-container[type="3"] .counter-number,
.counter-container[type="3"] .counter-title,
.counter-container[type="3"] .counter-description {
  display: block;
}
.counter-container .icon-uploader {
  background-image: url(./img/camera-solid.svg);
  width: 25px;
  height: 25px;
  position: absolute;
  top: 15px;
  right: 15px;
  cursor: pointer;
  background-position: center;
  background-repeat: no-repeat;
}