.icon-contents {
  --icon-contents-max-width-mobile: 72px;
  --icon-contents-max-width-tablet: 72px;
  --icon-contents-max-width-desktop: 72px;
  --icon-contents-max-width: var(--icon-contents-max-width-mobile);
  --icon-contents-max-height-mobile: 40px;
  --icon-contents-max-height-tablet: 40px;
  --icon-contents-max-height-desktop: 40px;
  --icon-contents-max-height: var(--icon-contents-max-height-mobile);
}
@media (min-width: 768px) {
  .icon-contents {
    --icon-contents-max-width: var(--icon-contents-max-width-tablet);
    --icon-contents-max-height: var(--icon-contents-max-height-tablet);
  }
}
@media (min-width: 1080px) {
  .icon-contents {
    --icon-contents-max-width: var(--icon-contents-max-width-desktop);
    --icon-contents-max-height: var(--icon-contents-max-height-desktop);
  }
}

figure.icon-contents {
  display: flex;
  padding: 0;
}

.icon-contents picture {
  --target-width: min(
    var(--icon-contents-max-width),
    calc(var(--icon-contents-max-height) * (var(--w) / var(--h)))
  );
  width: var(--target-width);
  aspect-ratio: var(--w)/var(--h);
  height: auto;
  min-width: 0;
  transform: none;
  background: transparent;
  display: flex;
  align-items: center;
}

:hover .icon-contents picture,
:active .icon-contents picture {
  transform: none;
}

.icon-contents svg,
.icon-contents img {
  min-width: 0;
  height: auto;
  width: 100%;
  object-fit: contain;
  object-position: left bottom;
  height: 100%;
  width: 100%;
}

/*# sourceMappingURL=/assets/application/content-modules/icon-contents-502dc481.css.map */