/**
 * Ionis wrapper component styles
 */
.ionis-wrapper {
  width: 100%;
  position: relative;
}

.ionis-wrapper__inner {
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* Color variants */
.ionis-wrapper--primary {
  background-color: var(--color-white);
  color: var(--color-black);
}

.ionis-wrapper--secondary {
  background-color: var(--color-purple);
  color: var(--color-white);
}

.ionis-wrapper--tertiary {
  background-color: var(--color-dark-purple);
  color: var(--color-white);
}

.ionis-wrapper--quaternary {
  background-color: var(--color-light-gray);
  color: var(--color-black);
}

.ionis-wrapper--pink {
  background-color: var(--color-pink);
  color: var(--color-white);
}

.ionis-wrapper--gray-gradient {
  background: linear-gradient(62.96deg, #ebecee 33.1%, #f1f1f1 88.47%);
  color: var(--color-black);
}

.ionis-wrapper--image {
  background-color: var(--color-white);
  color: var(--color-black);
}

/* Padding variants */
.ionis-wrapper--padding-small {
  padding: 20px 0;
}

.ionis-wrapper--padding-medium {
  padding: 40px 0;
}

.ionis-wrapper--padding-large {
  padding: 80px 0;
}

/* Width variants */
.ionis-wrapper--width-narrow > .ionis-wrapper__inner {
  max-width: 864px;
  padding: 0 20px;
}

.ionis-wrapper--width-medium > .ionis-wrapper__inner {
  max-width: 1320px;
  padding: 0 20px;
}

.ionis-wrapper--width-wide > .ionis-wrapper__inner {
  max-width: 1600px;
  padding: 0 20px;
}

.ionis-wrapper--width-full > .ionis-wrapper__inner {
  max-width: 100%;
  padding: 0;
}

.ionis-wrapper__wings {
  background-image: url("../../assets/images/global/logo-wings.svg");
  background-size: auto;
  background-repeat: no-repeat;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
}

@media (max-width: 1024px) {
  .ionis-wrapper__wings {
    background-image: url("../../assets/images/global/logo-wings-mobile.svg");
  }
}

.ionis-wrapper__wings.ionis-wrapper__wings--right {
  background-position: right bottom;
}

.ionis-wrapper__wings.ionis-wrapper__wings--left {
  background-position: left bottom;
}

.ionis-wrapper__wings.ionis-wrapper__wings--center {
  background-position: center bottom;
}

@media (max-width: 1024px) {
  .ionis-wrapper__wings {
    background-position: center;
    background-size: cover;
  }
}

.ionis-wrapper__image {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  background-image: linear-gradient(
      180deg,
      rgba(33, 33, 33, 0) 24.04%,
      rgba(33, 33, 33, 0.9) 100%
    ),
    var(--ionis-wrapper-bg-image-desktop);
  background-blend-mode: normal;
}

@media (max-width: 1024px) {
  .ionis-wrapper__image {
    background-image: linear-gradient(
        180deg,
        rgba(33, 33, 33, 0) 24.04%,
        rgba(33, 33, 33, 0.9) 100%
      ),
      var(
        --ionis-wrapper-bg-image-mobile,
        var(--ionis-wrapper-bg-image-desktop)
      );
  }
}