/* -------------------------------------- hdiw-card */
hdiw-card {
    flex: 0 0 auto;
    width: 100px;
    height: 600px;
    background: var(--wb-80-blue);
    transition: flex 0.4s ease-in-out, background-color 0.4s ease-in-out;
    overflow: hidden;
}

hdiw-card:hover {
    background: var(--wb-70-blue);
}

hdiw-card.active {
    flex: 1 0 auto;
    background: var(--wb-90-blue);
}

.hdit-content {
    cursor: pointer;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 50px 32px;
    display: grid;
    grid-template-areas:
        "icon"
        "nick"
        "title"
        "description";
    grid-template-rows: 46px auto;
    gap: var(--gap-bigger);
}

.hdit-content.active {
    cursor: auto;
}

.hdit-icon {
    grid-area: icon;
    height: 36px;
    width: 36px;
    fill: var(--wb-40-blue);
}

.hdit-icon.active {
    fill: var(--gold);
}

.hdit-nick {
    text-align: left;
    grid-area: nick;
    text-transform: capitalize;
    font-size: 0.7rem;
    color: var(--wb-40);
}

.hdit-nick.active {
    color: var(--wb-20);
}

.hdit-title {
    grid-area: title;
    margin: 0;
    width: 30%;
    min-width: 150px;
    text-transform: capitalize;
    font-size: 1.1rem;
    line-height: 25px;
    color: var(--wb-10);
    font-weight: var(--font-weight-semi-bold);
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;

}

.hdit-title.active {
    animation: elementFadeInWithDelay 1.5s forwards;
}

@keyframes elementFadeInWithDelay {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }
    40% {
        opacity: 0;
        transform: translateY(15px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.hdit-description {
    grid-area: description;
    margin: 0;
    overflow: hidden;
    font-size: 0.8rem;
    color: var(--wb-30);
    fill: var(--accent);
    line-height: 25px;
    display: flex;
    flex-direction: column;
    gap: var(--gap-big);
    opacity: 0;
}

.hdit-description.active {
    animation: elementFadeInWithDelay 1.5s forwards;
}

.hdit-description.active p {
    margin: 0;
}

@media all and (max-width: 1040px) and (min-width: 901px) {
    hdiw-card {
        height: 700px;
    }
}

@media all and (max-width: 900px) {
    hdiw-card {
        height: 800px;
    }
}