.com .bento {
    padding: 15px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 10px;
}

.com .card {
    display: flex;
    flex-direction: column;
    color: var(--text-800);
    background-color: rgba(var(--background-800-rgb), 0.2);
    border: 2px solid var(--background-300);
    border-radius: 20px;
    perspective: 1000px;
    position: relative;
    transition: all 0.6s;
    backdrop-filter: blur(3px);
}

.com .card:hover {
    cursor: pointer;
    background-color: var(--background-200);
    z-index: 1000;
}

.com .card .recto,
.com .card .verso {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1vh;
    /* padding: 10px; */
    border-radius: 20px;
}

.com .card .verso {
    background-color: var(--background-200);
    transform: rotateY(180deg);
}

.com .card:hover .recto {
    transform: rotateY(180deg);
    transition: transform 0.6s;
}

.com .card:hover .verso {
    transform: rotateY(360deg);
    transition: transform 0.6s;
    z-index: 1000;
}

.com .card .recto,
.com .card .verso {
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.com .card .title {
    margin: 0;
    font-size: 1em;
    width: 100%;
    text-align: center;
    padding: 10px;
    margin: 0;
    font-weight: 600;
}

.com .card .cicon {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.com .card .cicon img,
.com .card .cicon svg {
    height: 20px;
    width: 20px;
}

.com .card .cicon svg * {
    fill: var(--text-800) !important;
}

.com .card .hook {
    margin: 0;
    font-size: .8em;
    padding: 10px;
    margin: 0;
}

.com .card .content {
    margin: 0;
    font-size: .8em;
    padding: 10px;
    margin: 0;
}

.card.linkedin {
    grid-column: 1 / 3;
    grid-row: 1 / 4;
}

.card.socials {
    grid-column: 1 / 3;
    grid-row: 4 / 7;
}

.card.fr {
    grid-column: 3 / 5;
    grid-row: 1 / 3;
}

.card.cn {
    grid-column: 5 / 7;
    grid-row: 1 / 3;
}

.card.en {
    grid-column: 7 / 11;
    grid-row: 1 / 3;
}

.card.gAnalytics {
    grid-column: 3 / 6;
    grid-row: 3 / 5;
}

.card.writing {
    grid-column: 3 / 6;
    grid-row: 5 / 7;
}

.card.seo {
    grid-column: 6 / 9;
    grid-row: 3 / 7;
}

.card.nar {
    grid-column: 9 / 11;
    grid-row: 3 / 7;
}

.card.insp {
    grid-column: 11 / 13;
    grid-row: 1 / 4;
}

.card.resp {
    grid-column: 11 / 13;
    grid-row: 4 / 7;
}