.cta {
  --cta-display: flex;
  --cta-position: initial;
  --cta-flex: initial;
  --cta-flex-flow: column;
  --cta-align-items: center;
  --cta-justify-content: unset;
  --cta-width: 100%;
  --cta-height: initial;
  --cta-min-height: initial;
  --cta-margin: 30px 0;
  --cta-padding: initial;
  --cta-overflow: initial;
  --cta-transform: initial;
  --cta-transition: none;
  --cta-border-top: initial;
  --cta-border-right: initial;
  --cta-border-bottom: initial;
  --cta-border-left: initial;
  --cta-border-radius: 0;
  --cta-background: initial;
  --cta-color: initial;
  --cta-text-align: center;
  --cta-text-decoration: none;
  --cta-box-shadow: none;

  display: var(--cta-display);
  position: var(--cta-position);
  flex: var(--cta-flex);
  flex-flow: var(--cta-flex-flow);
  align-items: var(--cta-align-items);
  justify-content: var(--cta-justify-content);
  width: var(--cta-width);
  height: var(--cta-height);
  min-height: var(--cta-min-height);
  margin: var(--cta-margin);
  padding: var(--cta-padding);
  overflow: var(--cta-overflow);
  transform: var(--cta-transform);
  transition: var(--cta-transition);
  border-top: var(--cta-border-top);
  border-right: var(--cta-border-right);
  border-bottom: var(--cta-border-bottom);
  border-left: var(--cta-border-left);
  border-radius: var(--cta-border-radius);
  background: var(--cta-background);
  color: var(--cta-color);
  text-align: var(--cta-text-align);
  text-decoration: var(--cta-text-decoration);
  box-shadow: var(--cta-box-shadow);
}

@media screen and (min-width: 768px) {
  .cta {
    --cta-width: 33%;
    --cta-margin: 30px 0 0;
    --cta-padding: 0 30px;
  }
}

.cta:focus,
.cta:hover {
  text-decoration: var(--cta-text-decoration);
}

.cta:focus .field--name-field-description p,
.cta:hover .field--name-field-description p {
  --cta-description-color: var(--base-grey-dark);
}

.cta:focus .cta__button,
.cta:hover .cta__button,
.cta:focus .field--name-field-cta a,
.cta:hover .field--name-field-cta a {
  --cta-link-color: var(--secondary-color);
}

.cta .field--name-field-description p {
  margin: 0;
}

.cta .field--name-field-icon {
  --cta-icon-wrapper-position: initial;
  --cta-icon-wrapper-top: unset;
  --cta-icon-wrapper-right: unset;
  --cta-icon-wrapper-bottom: unset;
  --cta-icon-wrapper-left: unset;
  --cta-icon-wrapper-width: initial;
  --cta-icon-wrapper-min-width: initial;
  --cta-icon-wrapper-height: initial;
  --cta-icon-wrapper-min-height: initial;
  --cta-icon-wrapper-max-height: initial;
  --cta-icon-wrapper-margin: initial;
  --cta-icon-wrapper-opacity: 1;
  --cta-icon-wrapper-transition: initial;

  display: block;
  position: var(--cta-icon-wrapper-position);
  top: var(--cta-icon-wrapper-top);
  right: var(--cta-icon-wrapper-right);
  bottom: var(--cta-icon-wrapper-bottom);
  left: var(--cta-icon-wrapper-left);
  width: var(--cta-icon-wrapper-width);
  min-width: var(--cta-icon-wrapper-min-width);
  height: var(--cta-icon-wrapper-height);
  min-height: var(--cta-icon-wrapper-min-height);
  max-height: var(--cta-icon-wrapper-max-height);
  margin: var(--cta-icon-wrapper-margin);
  opacity: var(--cta-icon-wrapper-opacity);
  transition: var(--cta-icon-wrapper-transition);
}

.field--name-field-icon img {
  --cta-icon-width: initial;
  --cta-icon-min-width: initial;
  --cta-icon-max-width: initial;
  --cta-icon-height: initial;
  --cta-icon-max-height: initial;
  --cta-icon-margin: 0 auto;
  --cta-icon-transition: initial;
  --cta-icon-transform: initial;

  display: block;
  width: var(--cta-icon-width);
  min-width: var(--cta-icon-min-width);
  max-width: var(--cta-icon-max-width);
  height: var(--cta-icon-height);
  max-height: var(--cta-icon-max-height);
  margin: var(--cta-icon-margin);
  transition: var(--cta-icon-transition);
  transform: var(--cta-icon-transform);
}

.cta .field--name-field-title {
  margin: 0 0 13px;
  font-size: 20px;
  line-height: 24px;
  transition: initial;
}

@media screen and (min-width: 768px) {
  .cta .field--name-field-title {
    margin: 8px 0;
    font-size: 28px;
    line-height: 1.36;
  }
}

.cta__content {
  --cta-content-margin: initial;
  --cta-content-font-size: 17px;
  --cta-content-color: var(--base-grey-10);
  --cta-content-font-weight: var(--font-weight-regular);
  --cta-content-line-height: normal;

  margin: var(--cta-content-margin);
  color: var(--cta-content-color);
  font-size: var(--cta-content-font-size);
  font-weight: var(--cta-content-font-weight);
  line-height: var(--cta-content-line-height);
}

.cta .cta__button,
.cta .field--name-field-cta a {
  --cta-link-display: initial;
  --cta-link-margin: initial;
  --cta-link-padding: 0;
  --cta-link-border-top: none;
  --cta-link-border-right: none;
  --cta-link-border-bottom: none;
  --cta-link-border-left: none;
  --cta-link-border-radius: 0;
  --cta-link-background: transparent;
  --cta-link-color: initial;
  --cta-link-font-size: 80%;
  --cta-link-font-weight: var(--font-weight-bold);
  --cta-link-text-align: initial;
  --cta-link-text-decoration: none;
  --cta-link-text-transform: uppercase;
  --cta-link-letter-spacing: initial;
  --cta-link-line-height: initial;

  display: var(--cta-link-display);
  margin: var(--cta-link-margin);
  padding: var(--cta-link-padding);
  border-top: var(--cta-link-border-top);
  border-right: var(--cta-link-border-right);
  border-bottom: var(--cta-link-border-bottom);
  border-left: var(--cta-link-border-left);
  border-radius: var(--cta-link-border-radius);
  background: var(--cta-link-background);
  color: var(--cta-link-color);
  font-size: var(--cta-link-font-size);
  font-weight: var(--cta-link-font-weight);
  text-align: var(--cta-link-text-align);
  text-decoration: var(--cta-link-text-decoration);
  text-transform: var(--cta-link-text-transform);
  letter-spacing: var(--cta-link-letter-spacing);
  line-height: var(--cta-link-line-height);
}

.cta:has(.field--name-field-hover-icon) {
  position: relative;
}

.cta .field--name-field-hover-icon {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
}

.cta:has(.field--name-field-hover-icon):focus .field--name-field-icon,
.cta:has(.field--name-field-hover-icon):hover .field--name-field-icon {
  visibility: hidden;
  opacity: 0;
}

.cta:has(.field--name-field-hover-icon):focus .field--name-field-hover-icon ,
.cta:has(.field--name-field-hover-icon):hover .field--name-field-hover-icon {
  visibility: visible;
  opacity: 1;
}