/*html,
body {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    background-image: linear-gradient(90deg, #fff, #fff);
    font-family: Helvetica;
}
*/

.fill-purple {
    background-image: linear-gradient(90deg, #4addff, #a34dfe);
}

.fill-green {
    background-image: linear-gradient(90deg, #ffe40c, #33d497);
}

.fill-blue {
    background-image: linear-gradient(90deg, #285ca5, #18d5ff);
}

.fill-orange {
    background-image: linear-gradient(90deg, #fcf595, #ff954d);
}

.cards {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 21.875rem;
    width: 90%;
    padding-bottom: 30%;
}

.card {
    display: flex;
    width: 67.8125rem;
    height: 36.25rem;
    border-radius: 0.5rem;
    transform-origin: center center;
    transform: scale(1) translate(0px, 0px) perspective( 750px) rotateY(0deg);
    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    transition-duration: 0.5s;
    position: absolute;
    top: 0;
    box-shadow: 0 30px 50px rgba(0, 0, 0, 0.1);
    z-index: 3;
    cursor: pointer;
    overflow: hidden;
}

.card * {
    pointer-events: none;
}

.card--left {
    transform: scale(0.75) translate(-450px, 0px) perspective( 750px) rotateY(10deg);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
    z-index: 0;
}

.card--center {
    transform: scale(1) translate(-100px, 0px) perspective( 750px) rotateY(0deg);
    box-shadow: 0 30px 50px rgba(0, 0, 0, 0.1);
    z-index: 3;
}

.card--right {
    transform: scale(0.75) translate(350px, 0px) perspective( 750px) rotateY(-10deg);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.card--right2 {
    transform: scale(0.5) translate(950px, 0px) perspective( 750px) rotateY(-10deg);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.card__icon {
    width: 50%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card__image {
    width: 90%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card__icon:before {
    content: attr(data-icon);
    font-size: 3rem;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 1);
}

.card__detail {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 5px;
    font-family: Helvetica;
}

@media only screen and (max-width: 736px) {
    .cards {
        flex-direction: column;
        margin: auto 0;
        padding-bottom: 70%;
    }
    .card {
        display: flex;
        width: 90%;
    }
    .card--left {
        transform: scale(0.75) translate(0px, -150px) perspective(750px) rotateY(0) rotateX(-10deg) translateZ(-5px);
    }
    .card--center {
        transform: scale(1) translate(0px, 0px) perspective( 750px) rotateY(0deg) rotateX(0deg) translateZ(5px);
    }
    .card--right {
        transform: scale(0.75) translate(0px, 150px) perspective(750px) rotateY(0) rotateX(10deg) translateZ(-5px);
    }
    .card--right2 {
        transform: scale(0.5) translate(0px, 150px) perspective(750px) rotateY(0) rotateX(10deg) translateZ(-5px);
    }
    .card__icon:before {
        transform: scale(0.75);
    }
}