:root {
  --sg-max-w: 100%;
  --sg-max-h: none;
  --sg-min-w: 0;
  --sg-min-h: 0;
  --sg-object-fit: contain;
  --sg-object-position: center;
  --sg-aspect: auto;
  --sg-scale: 100%;
  --sg-pad-x: 0;
  --sg-pad-y: 0;
}

.site-graphic-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
}

.site-graphic-slot__frame {
  width: min(100%, var(--sg-max-w));
  height: auto;
  max-height: var(--sg-max-h);
  min-width: var(--sg-min-w);
  min-height: var(--sg-min-h);
  aspect-ratio: var(--sg-aspect);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: calc(var(--sg-pad-y) * 1%) calc(var(--sg-pad-x) * 1%);
  box-sizing: border-box;
}

.site-graphic-slot__link {
  display: block;
  width: 100%;
}

.site-graphic-slot__img {
  display: block;
  width: 100%;
  height: auto;
  max-width: var(--sg-scale);
  max-height: var(--sg-scale);
  margin-inline: auto;
  object-fit: var(--sg-object-fit);
  object-position: var(--sg-object-position);
}