.paragraph--type--big-counter {
  width: 100%;
  background-color: var(--big-counter-bg-color);
  background-repeat: no-repeat;
  background-image: var(--big-counter-bg-image);
  background-size: cover;
  background-position: center;
  translate: -0.75rem 0;
  color: var(--big-counter-text-color);
}

.paragraph--type--big-counter {
  --margin-lr: 0;
  /*         --margin-lr: calc(-50vw + calc( 260px / 2) + 0px ); */
  margin-left: var(--margin-lr);
  margin-right: var(--margin-lr);
  width: 100vw;
}
@media (min-width: 260px) {
  .paragraph--type--big-counter {
    --margin-lr: 0;
    /*         --margin-lr: calc(-50vw + calc( 260px / 2) + 0px ); */
    margin-left: var(--margin-lr);
    margin-right: var(--margin-lr);
    width: 100vw;
  }
}

@media (min-width: 576px) {
  .paragraph--type--big-counter {
    --margin-lr: calc(-50vw + calc( 576px / 2) - 3.4% );
    margin-left: var(--margin-lr);
    margin-right: var(--margin-lr);
    width: 100vw;
  }
}

@media (min-width: 768px) {
  .paragraph--type--big-counter {
    --margin-lr: calc(-50vw + calc( 768px / 2) - 3.4% );
    margin-left: var(--margin-lr);
    margin-right: var(--margin-lr);
    width: 100vw;
  }
}

@media (min-width: 992px) {
  .paragraph--type--big-counter {
    --margin-lr: calc(-50vw + calc( 992px / 2) - 1.8% );
    margin-left: var(--margin-lr);
    margin-right: var(--margin-lr);
    width: 100vw;
  }
}

@media (min-width: 1200px) {
  .paragraph--type--big-counter {
    --margin-lr: calc(-50vw + calc( 1200px / 2) - 2.7% );
    margin-left: var(--margin-lr);
    margin-right: var(--margin-lr);
    width: 100vw;
  }
}

@media (min-width: 1400px) {
  .paragraph--type--big-counter {
    --margin-lr: calc(-50vw + calc( 1400px / 2) - 3.1% );
    margin-left: var(--margin-lr);
    margin-right: var(--margin-lr);
    width: 100vw;
  }
}

@media(min-width: 1920px) {
  .paragraph--type--big-counter {
    --margin-lr: calc(-50vw + calc( 1920px / 2)  - 10.4%);
    margin-left: var(--margin-lr);
    margin-right: var(--margin-lr);
    width: 100vw;
  }
}

@media (min-width: 2560px) {
  .paragraph--type--big-counter {
    --margin-lr: calc(-1280px + calc( 1920px / 2)  - 10.4% );
    margin-left: var(--margin-lr);
    margin-right: var(--margin-lr);
    width: 2560px !important;
  }
}
.paragraph--type--big-counter>div {
}

.paragraph--type--big-counter>div>* {
  height: fit-content;
  width: fit-content;
}

.paragraph--type--big-counter > div > .field {
  margin: 0 auto;
  width: fit-content;
}
.paragraph--type--big-counter > div > .field--name-field-p-title {
  font-size: calc(1.375rem + 1.5vw);
  padding: 1rem 0;
}

.paragraph--type--big-counter > div > .field--name-field-paragraph-desc {
  width: 100%;
  padding: 1rem 0;
}

.paragraph--type--big-counter > div > .field--name-field-paragraph-items {
  display: flex;
  justify-content: center;
  align-content: stretch;
  justify-items: stretch;
  align-items: stretch;
  width: 100%;
  flex-wrap: wrap;
}
.paragraph--type--big-counter > div > .field--name-field-paragraph-items > .field__item{
  width: 25%;
  padding: 1rem;
}
@media (max-width: 1400px) {
  .paragraph--type--big-counter > div > .field--name-field-paragraph-items > .field__item{
    width: 33.333%;
    padding: 1rem;
  }
}
@media (max-width: 1000px) {
  .paragraph--type--big-counter > div > .field--name-field-paragraph-items > .field__item{
    width: 50%;
    padding: 1rem;
  }
}
@media (max-width: 770px) {
  .paragraph--type--big-counter > div > .field--name-field-paragraph-items > .field__item{
    width: 100%;
    padding: 0.5rem;
  }
}
.paragraph--type--big-counter > div > .field--name-field-paragraph-items > .field__item > .paragraph--type--counter-element {
  width: 100%;
  height: 100%;
  color: inherit;
}


.paragraph--type--counter-element {
  border-style: solid;
  border-width: 2px;
  border-top-width: 0;
  border-left-width: 0;
  /* border-radius: 0.15rem; */
  border-radius: 0;
  border-color: var(--big-counter-text-color);
  padding: 1rem;
  position: relative;
}
.paragraph--type--counter-element:after,
.paragraph--type--counter-element:before {
  position: absolute;
  content: '';
  display: block;
  border-style: solid;
  border-width: 2px;
  /* border-radius: 0.15rem; */
  border-radius: 0;
  border-color: var(--big-counter-text-color);
  background-color: var(--big-counter-text-color);
}

.paragraph--type--counter-element:after {
  top: 0;
  left: 50%;
  width: 50%;
  height: 0;
  border-width: 2px 0 0 0;
}

.paragraph--type--counter-element:before {
  left: 0;
  top: 75%;
  height: 25%;
  width: 0;
  border-width: 0 0 0 2px;
}

s
.paragraph--type--counter-element {
  display: grid;
  grid-auto-flow: column;
  grid-auto-rows: 1fr;
  grid-template-columns: min-content auto;
  grid-template-rows: auto auto;
  gap: 1ch 1ch;
  grid-template-areas:
      "number suffix"
      "desc desc";
  justify-content: stretch;
  align-content: stretch;
  justify-items: stretch;
  align-items: stretch;
}
.paragraph--type--counter-element > .field--name-field__paragraph-number-float3,
.paragraph--type--counter-element > .field--name-field-paragraph-number-suffix {
  font-size: 3rem;
  font-weight: 700;
}
.paragraph--type--counter-element > .field--name-field__paragraph-number-float3 {
  grid-area: number;
}
.paragraph--type--counter-element > .field--name-field-paragraph-number-suffix {
  grid-area: suffix;
}
.paragraph--type--counter-element > .field--name-field-paragraph-label {
  grid-area: desc;
  font-size: 1.071rem;
  font-weight: 400;
}