.grooming-accordion {

    display:flex;
    flex-direction:row;
    gap:12px;

    width:100%;
    height:500px;

    padding:60px;

    box-sizing:border-box;

}


/* карточки */
.g-item {

    flex:1;

    background:#413F3D;

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    cursor:pointer;

    transition:
    flex .5s ease,
    background .4s ease;

}



/* при наведении на всю группу */
.grooming-accordion:hover .g-item {

    flex:.5;

}



/* карточка под курсором */
.grooming-accordion .g-item:hover {

    flex:3;

    background:#dbb972;

}



/* первая открытая карточка */
.g-item.active {

    flex:3;

    background:#dbb972;

}



/* контейнер букв */

.g-text {

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;


    font-family:
    "TT Travels",
    "Manrope",
    "Inter",
    Arial,
    sans-serif;


    font-weight:500;

    text-transform:uppercase;


    color:#ffffff;


    font-size:22px;


    line-height:1;


    gap:10px;


    transition:
    font-size .5s ease,
    gap .5s ease,
    color .5s ease;

}



/* каждая буква */

.g-text span {

    display:flex;

    justify-content:center;

    align-items:center;


    width:60px;

    height:34px;


    text-align:center;


    /* одинаковая визуальная ширина */
    font-feature-settings:"tnum";

}



/* раскрытая карточка */

.g-item:hover .g-text,
.g-item.active .g-text {


    font-size:46px;


    gap:16px;


    color:#413F3D;

}