.paragraph--type--chip {
  --bg: var(--background--background-light);
  --bg-hover: var(--c--primary);
  --c: var(--c--black);
  --c-hover: var(--c--white);
  position: relative;
  display: flex;
  border-radius: var(--radius--3);
  overflow: hidden;
  background-color: var(--bg);
  color: var(--c);
  transition: background-color linear 0.3s;
}
.paragraph--type--chip .chip {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  align-items: flex-start;
  gap: var(--spacing--2);
  margin: var(--spacing--2);
}
@media (min-width: 768px) {
  .paragraph--type--chip .chip.has-link .btn-icon {
    margin-right: calc(var(--spacing--1) * -1);
    margin-bottom: calc(var(--spacing--1) * -1);
  }
}
.paragraph--type--chip .chip > i {
  font-size: 3.7rem;
}
.paragraph--type--chip h3 {
  font-size: var(--typography--font-size--lg);
  line-height: 1.1;
}
.paragraph--type--chip .cta-wrapper {
  display: block;
  flex: 0 0 100%;
  text-align: right;
}
@media (max-width: 767px) {
  .paragraph--type--chip .cta-wrapper {
    flex: 0;
  }
}
.paragraph--type--chip:hover, .paragraph--type--chip:active {
  background-color: var(--bg-hover);
}
.paragraph--type--chip:hover h3, .paragraph--type--chip:hover .chip > i:first-child, .paragraph--type--chip:active h3, .paragraph--type--chip:active .chip > i:first-child {
  color: var(--c-hover);
}
.paragraph--type--chip .chip-link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.paragraph--type--chips h2, .paragraph--type--chips h3, .paragraph--type--chips h4, .paragraph--type--chips h5,
.paragraph--type--chips-v2 h2,
.paragraph--type--chips-v2 h3,
.paragraph--type--chips-v2 h4,
.paragraph--type--chips-v2 h5 {
  flex: 1;
  font-weight: 600;
}
.paragraph--type--chips .paragraph-content,
.paragraph--type--chips-v2 .paragraph-content {
  padding-top: var(--spacing--6);
  padding-bottom: var(--spacing--6);
}
.paragraph--type--chips .chips-title,
.paragraph--type--chips .chips-text,
.paragraph--type--chips-v2 .chips-title,
.paragraph--type--chips-v2 .chips-text {
  line-height: 1.1;
}
.paragraph--type--chips .col-text,
.paragraph--type--chips-v2 .col-text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing--2);
}
@media (min-width: 992px) {
  .paragraph--type--chips .col-text,
  .paragraph--type--chips-v2 .col-text {
    align-items: baseline;
  }
}

.bg--primary .paragraph--type--chip {
  --bg-hover: var(--c--black);
}

.bg--grey .paragraph--type--chip {
  --bg-hover: var(--background--background-primary);
  --bg: var(--background--background);
}
.bg--grey .paragraph--type--chip .btn {
  --btn-bg: var(--background--background-light);
  --btn-border: var(--background--background-light);
  --btn-hover-bg: var(--c--white);
  --btn-hover-border: var(--c--white);
}

.paragraph--type--chips .chips-wrapper {
  width: 100%;
  padding-top: var(--spacing--6);
}
.paragraph--type--chips .chips-wrapper .item-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing--2);
}
@media (max-width: 991px) {
  .paragraph--type--chips .chips-wrapper .item-list ul {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .paragraph--type--chips .chips-wrapper .item-list ul {
    display: flex;
    flex-direction: column;
  }
}
.paragraph--type--chips .node--paragraphs-page--chip:hover, .paragraph--type--chips .node--paragraphs-page--chip:focus, .paragraph--type--chips .node--paragraphs-page--chip:active {
  color: var(--text--inverse);
}

.paragraph--type--chips-v2 .content {
  display: flex;
  gap: var(--spacing--6);
}
.paragraph--type--chips-v2 .content.flex-col {
  flex-direction: column;
}
.paragraph--type--chips-v2 .content.flex-col .chips-wrapper {
  grid-template-columns: repeat(4, 1fr);
}
.paragraph--type--chips-v2 .chips-wrapper {
  display: grid;
  gap: var(--spacing--2);
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
}
@media (max-width: 767px) {
  .paragraph--type--chips-v2 .chips-wrapper {
    display: flex;
    flex-direction: column;
  }
}
@media (max-width: 991px) {
  .paragraph--type--chips-v2 .content {
    flex-direction: column;
  }
}
@media (min-width: 992px) {
  .paragraph--type--chips-v2 .content:not(.flex-col) .col-text,
  .paragraph--type--chips-v2 .chips-text-right .col-text {
    flex: 0 0 50%;
  }
  .paragraph--type--chips-v2 .chips-text-right .col-text {
    order: 2;
  }
}
/*# sourceMappingURL=paragraph--chips.css.map */