* {
    margin: 0; padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #EEE;
}

h1 {
    margin-top: 1rem;
    text-align: center;
    font-family: 'Angkor', verdana;
    font-weight: 400;
    font-style: normal;
    font-size: 11svw;
    line-height: 11svw;
    text-transform: uppercase;
    margin-bottom: 100px;
    background-image: linear-gradient(to bottom, rgba(255, 189, 189, 0.549), rgba(114, 255, 250, 0.663)), 
    url(../images/three-people.jpg);
    background-size: 110%;
    background-position: 65% 53%;
    background-clip: text;
    color: transparent;
}

section.three-boxes {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 150px;
    margin-bottom: 100px;
}

div {
    border: 4px solid rgb(255, 121, 121);
    border-image: linear-gradient(to bottom, rgba(255, 189, 189, 0.549), rgba(114, 255, 250, 0.663)) 2;
    border-radius: 0%;
    aspect-ratio: 1;
    flex: 0 0 20%;
    /* ^ flex grow, shrink, basis in order */
    transform: rotate(-45deg);
    position: relative;
    overflow: hidden;
    box-shadow: -10px 10px 0px rgba(255, 92, 103, 0.263);
    transition: .20s linear
}

figure {
    background-image: url(../images/three-people.jpg);
    background-size: cover;
    width: 145%;
    aspect-ratio: 1;
    transform: rotate(45deg);
    position: absolute;
    top: -23%; left: -23%;
    filter: saturate(80%);
}

div:hover {
    box-shadow: 0px 0px 0px rgba(0, 255, 255, 0.444);
}

div:nth-child(1) figure {
    background-position: 35% 50%;
    background-size: 650%;
}

div:nth-child(2) figure {
    background-position: 54% 48%;
    background-size: 550%;
}

div:nth-child(3) figure {
    background-position: 72% 48%;
    background-size: 650%;
}