.skills {
    background-color: #303030;
}

.skills .skills-content {
    text-align: center;
    margin: auto;
}

.skills .skills-content .cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.skills .skills-content .cards .card {
    width: calc(15% - 20px);
    height: 100px;
    margin-bottom: 15px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
    transition: all 0.5s;
}

.skills .skills-content .cards .card img {
    width: 100%;
    border-radius: 10px;
}

.skills .skills-content .cards .card:hover {
    transform: rotateY(180deg);
}

.skills .skills-content .cards .card .face {
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    border-radius: 10px;
}

.skills .skills-content .cards .card .front {
    backface-visibility: hidden;
    z-index: 1;
}

.skills .skills-content .cards .card .back {
    background-color: #505050;
    color: #fafafa;
    backface-visibility: hidden;
    transform: rotateY(180deg);
}

/* Responsivo */
@media (max-width: 2000px) {
    .skills .skills-content .cards .card {
        width: calc(15% - 20px);
        margin-bottom: 20px;
    }
}

@media (max-width: 1200px) {
    .skills .skills-content .cards .card {
        width: calc(20% - 20px);
        margin-bottom: 20px;
    }
}

@media (max-width: 950px) {
    .skills .skills-content .cards .card {
        width: calc(20% - 10px);
        margin-bottom: 10px;
    }
}

@media (max-width: 700px) {
    .skills .skills-content .cards .card {
        width: calc(25% - 10px);
        margin-bottom: 10px;
    }
}

@media (max-width: 550px) {
    .skills .skills-content .cards .card {
        width: calc(30% - 20px);
        margin-bottom: 20px;
    }
}

@media (max-width: 500px) {
    .skills .skills-content .cards .card {
        width: calc(35% - 20px);
        margin-bottom: 20px;
    }
}

@media (max-width: 410px) {
    .skills .skills-content .cards .card {
        width: calc(40% - 20px);
        margin-bottom: 20px;
    }
}

@media (max-width: 375px) {
    .skills .skills-content .cards .card {
        width: calc(50% - 20px);
        margin-bottom: 20px;
    }
}

@media (min-width: 2000px) {
    .skills .skills-content .cards .card {
        width: calc(10% - 20px);
        margin-bottom: 20px;
    }
}
@media (min-width: 2500px) {
    .skills .skills-content .cards .card {
        width: calc(5% - 20px);
        margin-bottom: 20px;
    }
}
@media (min-width: 3000px) {
    .skills .skills-content .cards .card {
        width: calc(1% - 20px);
        margin-bottom: 25px;
    }
}