/* Heart, star and sunflower sit as frames. The photo fills the opening. */
.portrait.is-heart,
.portrait.is-star,
.portrait.is-sun {
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .16));
  -webkit-mask: none;
  mask: none;
}
.portrait.is-heart::before,
.portrait.is-star::before,
.portrait.is-sun::before {
  content: "";
  position: absolute;
  background: linear-gradient(180deg, var(--accent-light), var(--accent));
  pointer-events: none;
  z-index: 2;
}

.portrait.is-round {
  width: 188px;
  height: 236px;
  border-radius: 36px;
}
.portrait.is-round img { border-radius: 30px; }

.portrait.is-oval {
  width: 188px;
  height: 236px;
  border-radius: 50%;
}
.portrait.is-oval img { border-radius: 50%; }

.portrait.is-heart {
  width: 280px;
  height: 260px;
}
.portrait.is-heart::before {
  inset: -2px;
  -webkit-mask: url("shapes/heart-frame.svg?v=2") center / 100% 100% no-repeat;
  mask: url("shapes/heart-frame.svg?v=2") center / 100% 100% no-repeat;
}
.portrait.is-heart img {
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  -webkit-mask: url("shapes/heart.svg?v=2") center / 100% 100% no-repeat;
  mask: url("shapes/heart.svg?v=2") center / 100% 100% no-repeat;
}

.portrait.is-star {
  width: 250px;
  height: 250px;
}
.portrait.is-star::before {
  inset: 0;
  -webkit-mask: url("shapes/star.svg?v=2") center / 100% 100% no-repeat;
  mask: url("shapes/star.svg?v=2") center / 100% 100% no-repeat;
}
.portrait.is-star img {
  inset: 13%;
  width: 74%;
  height: 74%;
  border-radius: 50%;
  z-index: 1;
  -webkit-mask: none;
  mask: none;
}

.portrait.is-sun {
  width: 236px;
  height: 236px;
}
.portrait.is-sun::before {
  inset: 0;
  -webkit-mask: url("shapes/sunflower.svg?v=2") center / 100% 100% no-repeat;
  mask: url("shapes/sunflower.svg?v=2") center / 100% 100% no-repeat;
}
.portrait.is-sun img {
  inset: 12%;
  width: 76%;
  height: 76%;
  border-radius: 50%;
  z-index: 1;
  -webkit-mask: none;
  mask: none;
  box-shadow: 0 0 0 3px #fff8ea;
}

@media (max-width: 760px) {
  .portrait.is-round { width: 168px; height: 210px; }
  .portrait.is-round img { border-radius: 26px; }
  .portrait.is-oval { width: 168px; height: 210px; }
  .portrait.is-oval img { border-radius: 50%; }
  .portrait.is-heart { width: 240px; height: 222px; }
  .portrait.is-star { width: 220px; height: 220px; }
  .portrait.is-sun { width: 210px; height: 210px; }
}