#skills {
    position: relative;
    background-color: var(--wp--preset--color--bg-hero);
    overflow: hidden;

    & .content {
        padding: 20px 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 20px;

        & .card-skills {
            position: relative;
            width: 100%;

            > div {
                backface-visibility: hidden;
            }

            & .face-1 {
                position: absolute;
                top: 0; left: 0; width: 100%; height: 100%;
                transform: perspective(1000px) rotateX(0deg);
                transition: all 1s ease-in-out;
                transition-delay: .2s;
                display: grid; place-content: center;
                
                & h2 {
                    text-transform: uppercase;
                    letter-spacing: 10px;
                    font-weight: 600;
                    opacity: .5;
                }
            }

            & .face-2 {
                transform: perspective(1000px) rotateX(180deg);
                transition: all 1s ease-in-out;
                transition-delay: .2s;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: center;
                gap: 20px;

                & .skill-card,
                & p {
                    display: flex;
                    align-items: center;
                    gap: 7px;
                    max-height: 28px;
                    overflow: hidden;
                    transition: color .3s ease-in-out;
                }

                & .skill-card:hover,
                & p:hover {
                    color: var(--wp--preset--color--white);
                }

                & .skill-card.woocommerce {
                    position: relative;
                    top: 3px;
                }
            }
        }

    }
}

#skills.rotate {
    & .content {
        & .card-skills {

            & .face-1 {
                transform: perspective(1000px) rotateX(180deg);
            }

            & .face-2 {
                transform: perspective(1000px) rotateX(360deg);
            }
        }
    }
}