:root {
  --left-width: 155px;
  --right-width: 135px;
  --full-width: 320px;
  --left-start: 20px;
  --right-start: 205px;
  --bottom-top-start: 485px;
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #ae00ff;
}

img {
  width: 100%;
}

.main {
  height: 672px;
  width: 360px;
  margin: 0 auto;
  position: relative;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain;
}

.max {
  background-image: url("/namecard/max_bg.jpeg");
}
.alice {
  background-image: url("/namecard/alice_bg.jpeg");
}
.crysella {
  background-image: url("/namecard/crysella_bg.jpeg");
}
.albert {
  background-image: url("/namecard/albert_bg.jpeg");
}
.brian {
  background-image: url("/namecard/brian_bg.jpeg");
}
.henry {
  background-image: url("/namecard/henry_bg.jpeg");
}
.hanxian {
  background-image: url("/namecard/hanxian_bg.jpeg");
}

.save-my-contact {
  width: var(--left-width);
  position: absolute;
  left: var(--left-start);
  top: 213px;
}

.right-item {
  width: var(--right-width);
  position: absolute;
  left: var(--right-start);
  top: 230px;
}

.find-me {
  display: block;
  margin: 5px;
}

.contact-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 5px;
  padding: 0px 5px;
  margin: 0px;
}

.suprise {
  display: block;
  padding-top: 10px;
}

.bottom-section {
  width: var(--full-width);
  position: absolute;
  left: var(--left-start);
  top: var(--bottom-top-start);
}

.bottom-section > p {
  margin: 5px 0px;
  font-family: "Arial Black", Gadget, sans-serif;
  font-weight: bold;
  color: #ffffff;
  font-size: 12px;
}

.bottom-section > p > span {
  color: #fcca6a;
}

.social-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 15px;
  padding: 5px 0px;
  margin: 0px;
}

.social-list li {
  display: flex;
  justify-content: center;
  align-items: center;
}

.social-list-2 li {
  align-items: start;
}

.healthland-logo {
  grid-column-end: span 3;
}