body {
    background-color: var(--neutral-dark);
    font-family: "Outfit", sans-serif;
}

main {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    padding: 0 25px;
}

.card {
    width: 302px;
    display: flex;
    flex-direction: column;
    background-color: var(--neutral-medium);
    padding: 25px;
    border-radius: 13px;
}

.card a.imagens-principais {
    display: flex;
    position: relative;
}

.card a.imagens-principais,
.card a.imagens-principais img.equilibrium,
.card a.imagens-principais::before,
.card a.imagens-principais::after {
    width: 100%;
    height: 100%;
}

.card a.imagens-principais::before,
.card a.imagens-principais::after {
    content: '';
    display: inline-block;
    position: absolute;
    opacity: 0;
    transition: 0.3s ease-in-out;
    border-radius: 8px;
}

.card a.imagens-principais::before {
    background-color: cyan;
}

.card a.imagens-principais::after {
    background: url(../images/icon-view.svg) no-repeat center;
}

.card a.imagens-principais img.equilibrium {
    border-radius: 8px;
}

.card a.nome-numero-card-link .nome-numero-card {
    color: #ffffff;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: 1px;
    margin-top: 25px;
}

.card .descricao-card {
    font-weight: 300;
    font-size: 16px;
    color: var(--primary-soft);
    margin-top: 22px;
    letter-spacing: 1px;
    line-height: 25px;
}

.card .contagem {
    display: flex;
    justify-content: space-between;
    font-weight: 400;
    font-size: 15px;
    letter-spacing: 1px;
    margin-top: 22px;
}

.card .contagem .contagem-eth,
.card .contagem .contagem-dias {
    display: flex;
    gap: 7px;
}

.card .contagem .contagem-eth {
    color: var(--primary-medium);
}

.card .contagem .contagem-dias {
    color: var(--primary-soft);
}

.card .separador-conteudo {
    border: 0.8px solid var(--neutral-soft);
    margin-top: 20px;
}

.card .creditos-autor {
    display: flex;
    align-items: center;
    font-weight: 300;
    color: var(--primary-soft);
    gap: 15px;
    margin-top: 13px;
    padding: 5px 0 10px 0;
}

.card .creditos-autor .avatar-autor {
    max-width: 11%;
    border: 0.8px solid #ffffff;
    border-radius: 40px;
}

.card .creditos-autor .nome-autor {
    color: #ffffff;
}



.card a.nome-numero-card-link .nome-numero-card:hover,
.card .creditos-autor .creditos a.nome-autor:hover {
    color: var(--primary-medium);
}

.card a.imagens-principais:hover::before {
    opacity: 0.5;
}

.card a.imagens-principais:hover::after {
    opacity: 1;
}