body {
display: flex;
justify-content: space-around;
align-content: center;
align-items: center;
flex-wrap: wrap;
min-height: 100vh;
background-image: linear-gradient(#111, #050505);
--img-url: url(https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=350&h=350&fit=crop&crop=faces);
}
.headshot {
flex-shrink: 0;
margin: 20px;
height: calc(150px + 6vw);
width: calc(150px + 6vw);
border: calc(8px + 0.2vw) solid transparent;
background-origin: border-box;
background-clip: content-box, border-box;
background-size: cover;
box-sizing: border-box;
box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.5);
}
.headshot-1 {
border-radius: 10%;
background-image: var(--img-url), linear-gradient(#f9f047, #0fd850);
}
.headshot-2 {
border-radius: 50%;
background-image: var(--img-url), linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5);
}
.headshot-3 {
border-radius: 50% 10%;
background-image: var(--img-url), linear-gradient(to bottom left, #f83600, #f9d423);
