body {
  padding: 0 30px;
}

body.embed-service-card {
  padding: 0;
  margin: 0;
  overflow: hidden;
  background: transparent;
  --web-shell-base: #8f4743;
  --web-shell-lid: #7a3230;
  --web-shell-open: #642424;
  --web-screen-frame: #ffffff;
  --web-gold-bright: #b68558;
  --web-gold-mid: #a56d3b;
  --web-gold-deep: #8f5a2d;
}

svg {
  display: block;
  max-width: 800px;
  margin: 70px auto 0;
}

body.embed-service-card svg {
  width: 100%;
  max-width: none;
  margin: 0;
}

body.embed-service-card #ra-mac-base {
  fill: var(--web-shell-base);
}

body.embed-service-card #ra-mac-lid {
  fill: var(--web-shell-lid);
}

body.embed-service-card #ra-mac-open {
  fill: var(--web-shell-open);
}

body.embed-service-card #ra-mac-screen {
  fill: var(--web-screen-frame);
}

body.embed-service-card .cls-18,
body.embed-service-card .cls-25 {
  fill: var(--web-gold-bright);
}

body.embed-service-card .cls-37,
body.embed-service-card .cls-48,
body.embed-service-card .cls-50,
body.embed-service-card .cls-51,
body.embed-service-card .cls-52 {
  fill: var(--web-gold-mid);
}

body.embed-service-card .cls-43,
body.embed-service-card .cls-44,
body.embed-service-card .cls-45 {
  fill: var(--web-gold-deep);
}
@media (max-width: 800px) {
  svg {
    margin: 8vw auto 0;
  }
}
svg[hidden] {
  visibility: hidden;
}

.ra-labels {
  position: relative;
}

body.embed-service-card .ra-labels {
  display: none;
}

.ra-labels span {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  margin: 50px 0;
  font: 300 36px Roboto, sans-serif;
  text-align: center;
  color: #888;
}
@media (max-width: 800px) {
  .ra-labels span {
    margin: 8vw 0;
    font-size: 5vw;
  }
}
@media (max-width: 500px) {
  .ra-labels span {
    font-size: 8vw;
  }
}