@st-namespace 'examples-st-css';
@st-import Card from "../Card.st.css";
@st-import [ color ] from "../../../common/formatters.st";

@property st-global(--wix-ui-tpa-card-ratio);

.root {
  -st-extends: Card;

  max-width: 100%;
  height: 100%;
  border: 1px solid #000;
  background-color: color(color-1);
}

.info {
  padding: 30px;
}

.media img {
  vertical-align: middle;
  height: auto;
}

.stacked,
.stacked .info,
.stacked .media {
  width: 400px;
}

.wrap .media img {
  width: 100%;
  height: auto;
}

.root.ratio .info {
  --wix-ui-tpa-card-ratio: 80;
}

.root.ratio .media {
  --wix-ui-tpa-card-ratio: 20;
}

.root.ratio2 .info {
  --wix-ui-tpa-card-ratio: 40;
}

.root.ratio2 .media {
  --wix-ui-tpa-card-ratio: 60;
}

.root.ratio .media img {
  height: 100% !important;
  object-fit: cover;
}

/* st-namespace-reference="../../../../../src/components/Card/docs/examples.st.css" */