.iconic-paragraph {
  box-sizing: border-box;
  width: 100%;
  padding-top: var(--ip-padding-top, 40px);
  padding-bottom: var(--ip-padding-bottom, 40px);
  background: var(--ip-background, #fff);
}

.iconic-paragraph *,
.iconic-paragraph *::before,
.iconic-paragraph *::after { box-sizing: border-box; }

.iconic-paragraph__inner {
  float: none;
  width: calc(100% - 40px);
  max-width: var(--ip-inner-width, 1400px);
  margin-right: auto !important;
  margin-left: auto !important;
}

.iconic-paragraph__title { margin: 0 0 28px; }
.iconic-paragraph__items { display: grid; gap: var(--ip-item-gap, 40px); }
.iconic-paragraph__item {
  min-width: 0;
  margin: var(--ip-item-margin, 0);
  padding: var(--ip-item-padding, 0);
  border-radius: var(--ip-item-border-radius, 0);
  background: var(--ip-item-background, transparent);
}

.iconic-paragraph__item--image-left,
.iconic-paragraph__item--image-right {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--ip-text-ratio, 2fr));
  align-items: center;
  gap: clamp(22px, 4vw, 64px);
}

.iconic-paragraph__item--image-right { grid-template-columns: minmax(0, var(--ip-text-ratio, 2fr)) minmax(0, 1fr); }
.iconic-paragraph__item--image-left.has-no-media,
.iconic-paragraph__item--image-right.has-no-media { display: block; }

.iconic-paragraph__item--image-top,
.iconic-paragraph__item--image-bottom,
.iconic-paragraph__item--two-images-top,
.iconic-paragraph__item--two-images-bottom { display: grid; gap: clamp(18px, 2.5vw, 36px); }

.iconic-paragraph__images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2.5vw, 32px);
  width: 100%;
  margin: 0;
}

.iconic-paragraph__images .iconic-paragraph__image { max-width: none; }
.iconic-paragraph__images .iconic-paragraph__image:only-child {
  grid-column: 1 / -1;
  width: 50%;
  justify-self: center;
}

.iconic-paragraph__item--icon-left,
.iconic-paragraph__item--icon-right {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--ip-text-ratio, 2fr));
  align-items: center;
  gap: clamp(18px, 3vw, 44px);
}

.iconic-paragraph__item--icon-right { grid-template-columns: minmax(0, var(--ip-text-ratio, 2fr)) minmax(0, 1fr); }
.iconic-paragraph__item--icon-both {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--ip-text-ratio, 2fr)) minmax(0, 1fr);
  align-items: center;
  gap: clamp(18px, 3vw, 44px);
}
.iconic-paragraph__item--icon-left.has-no-media,
.iconic-paragraph__item--icon-right.has-no-media,
.iconic-paragraph__item--icon-both.has-no-media { display: block; }

.iconic-paragraph__media {
  width: 100%;
  max-width: var(--ip-media-max-width, 100%);
  min-width: 0;
  place-self: var(--ip-media-place, center center);
  margin: var(--ip-media-margin, 0);
  padding: var(--ip-media-padding, 0);
  overflow: hidden;
  border-radius: var(--ip-media-box-border-radius, 0);
  background: var(--ip-media-background, transparent);
}

.iconic-paragraph__image {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: var(--ip-image-padding, 20px);
  overflow: hidden;
}

.iconic-paragraph__image.has-aspect { aspect-ratio: var(--ip-image-aspect); }
.iconic-paragraph__image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ip-image-border-radius, 0);
  box-shadow: var(--ip-image-box-shadow, none);
  transform: rotate(var(--ip-image-rotation, 0deg));
  transform-origin: center;
}

.iconic-paragraph__item--image-left .iconic-paragraph__image img,
.iconic-paragraph__item--image-right .iconic-paragraph__image img {
  box-shadow: var(--ip-image-side-box-shadow, var(--ip-image-box-shadow, none));
}

.iconic-paragraph__image.has-aspect img { height: 100%; object-fit: cover; }
.iconic-paragraph__image.has-aspect[style*="90deg"] img,
.iconic-paragraph__image.has-aspect[style*="270deg"] img { transform: rotate(var(--ip-image-rotation)) scale(1.45); }

.iconic-paragraph__icon {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1;
  background: var(--ip-icon-color, #ec008c);
  -webkit-mask: var(--ip-icon) center / contain no-repeat;
  mask: var(--ip-icon) center / contain no-repeat;
}

.iconic-paragraph__item--icon-left .iconic-paragraph__icon,
.iconic-paragraph__item--icon-right .iconic-paragraph__icon { justify-self: center; }

.iconic-paragraph__text {
  min-width: 0;
  margin: var(--ip-text-margin, 0);
  padding: var(--ip-text-padding, 0);
  border-radius: var(--ip-text-box-border-radius, 0);
  background: var(--ip-text-background, transparent);
}
.iconic-paragraph__text > :first-child { margin-top: 0; }
.iconic-paragraph__text > :last-child { margin-bottom: 0; }
.iconic-paragraph__text img { max-width: 100%; height: auto; }

@media (max-width: 700px) {
  .iconic-paragraph__inner { width: calc(100% - 28px); }
  .iconic-paragraph__item--image-left,
  .iconic-paragraph__item--image-right,
  .iconic-paragraph__item--icon-left,
  .iconic-paragraph__item--icon-right,
  .iconic-paragraph__item--icon-both { grid-template-columns: 1fr; }
  .iconic-paragraph__item--image-left.keep-mobile-side { grid-template-columns: minmax(0, 1fr) minmax(0, var(--ip-text-ratio, 2fr)); }
  .iconic-paragraph__item--image-right.keep-mobile-side { grid-template-columns: minmax(0, var(--ip-text-ratio, 2fr)) minmax(0, 1fr); }
  .iconic-paragraph__item--icon-left.keep-mobile-side { grid-template-columns: minmax(0, 1fr) minmax(0, var(--ip-text-ratio, 2fr)); gap: 16px; }
  .iconic-paragraph__item--icon-right.keep-mobile-side { grid-template-columns: minmax(0, var(--ip-text-ratio, 2fr)) minmax(0, 1fr); gap: 16px; }
  .iconic-paragraph__item--icon-both.keep-mobile-side { grid-template-columns: minmax(0, 1fr) minmax(0, var(--ip-text-ratio, 2fr)) minmax(0, 1fr); gap: 12px; }
  .iconic-paragraph__item--image-right:not(.keep-mobile-side) .iconic-paragraph__media,
  .iconic-paragraph__item--icon-right:not(.keep-mobile-side) .iconic-paragraph__media { order: -1; }
}
