.row--gutter {
  margin-left: -15px;
  margin-right: -15px;
  overflow: hidden;
}

a {
  color: #727272;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: color 0.5s ease;
}
.ux-info-banner[type=info] a:hover {
  color: #fff;
}
.ux-info-banner[type=error] a:hover {
  color: #ff0201;
}
a:hover {
  color: #131313;
}

/**
@prop --card-icon-size: Size of the icon (default `120px`)
@prop --card-image-size: Fixed size of the image in a horizontal card layout (default `214px`)
@Prop --card-image-min-height: Min height of the image in a horizontal card layout (default `214px`)
 */
:host {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  background: radial-gradient(127.42% 127.42% at 50% 50%, #fff 0%, #c3cfd6 100%);
}
:host .container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: relative;
  overflow: hidden;
  padding: 0;
  margin: 0;
}
:host img,
:host ::slotted(img) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
:host ux-icon {
  font-size: var(--card-icon-size, 120px);
}

:host-context([layout=vertical]) .container {
  aspect-ratio: var(--aspect-ratio, initial);
  height: auto;
}

:host-context([layout=horizontal]) .container {
  width: var(--card-image-size, 214px);
  min-height: var(--card-image-min-height, var(--card-image-size, 214px));
  aspect-ratio: initial;
  height: 100%;
}
:host-context([layout=horizontal]) img,
:host-context([layout=horizontal]) ::slotted(img) {
  position: absolute;
  height: 100%;
}