.section-living {
  display: grid;
  place-content: center;
  /* align-items: center;
  justify-content: center; */
  padding: 5%;;
  height: 100vh;
  min-height: 100vh;
  position: relative;
}

.section-living .content {
  text-align: center;
}

.section-living .content h1 {
  color: rgb(var(--twlo-red));
  font-family: 'TwilioSansDisplay-Extrabold', sans-serif;
  font-size: 4vmax;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.section-living .content p {
  font-size: 1.3vmax;
  max-width: 55ch;
  margin: 0 auto;
}

.atropos-magic-venn {
  width: var(--venn-size);
  height: var(--venn-size);
  z-index: 1;
  margin-bottom: 5rem;
  --venn-size: 25vw;
  --label-position: 3vw;
}

.atropos-magic-venn-circle {
  width: calc(var(--venn-size) * 0.63);
  height: calc(var(--venn-size) * 0.63);
  border-radius: 100%;
  border: 10px solid rgb(var(--twlo-red));
  background-color: rgba(var(--twlo-red), 0.25);
  background-size: var(--venn-size);
  background-position: center;
  /* mix-blend-mode: multiply; */
  overflow: hidden;
  position: absolute;
}

.atropos-magic-venn-top-left {
  top: 0;
  left: 0;
}

.has-image::after {
  content: '';
  display: inline-block;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: opacity 1s 500ms ease;
}

.has-image.is-completed::after {
  opacity: 0;
}

.atropos-magic-venn-top-left.has-image::after {
  background-image: url(../images/twilion.png);
}

.atropos-magic-venn-top-right {
  top: 0;
  right: 0;
}

.atropos-magic-venn-top-right.has-image::after {
  background-image: url(../images/image-4.jpg);
}

.atropos-magic-venn-bottom-left {
  bottom: 0;
  left: 0;
}

.atropos-magic-venn-bottom-left.has-image::after {
  background-image: url(../images/image-3.jpg);
}

.atropos-magic-venn-bottom-right {
  bottom: 0;
  right: 0;
}

.atropos-magic-venn-bottom-right.has-image::after {
  background-image: url(../images/image-2.jpg);
}

.atropos-magic-venn .label {
  z-index: -1;
  color: inherit;
  text-align: center;
  font-size: calc(var(--venn-size) * 0.04);
  position: absolute;
}

.atropos-magic-venn .label strong {
  display: block;
  font-weight: 900;
}

.atropos-magic-venn-top-left .label {
  top: var(--label-position);
  left: var(--label-position);
}

.atropos-magic-venn-top-right .label {
  top: var(--label-position);
  right: var(--label-position);
}

.atropos-magic-venn-bottom-left .label {
  bottom: var(--label-position);
  left: var(--label-position);
}

.atropos-magic-venn-bottom-right .label {
  bottom: var(--label-position);
  right: var(--label-position);
}