body {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    line-height: var(--line-height);
    background-color: var(--yellow-color);
    font-family: var(--font-family);
}

.card {
    width: 384px;
    height: 522px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--white-color);
    border: 2px solid var(--gray-950-color);
    border-radius: 25px;
    padding: 24px;
    box-shadow: 10px 10px var(--gray-950-color);

    @media (max-width: 375px) {
        width: 327px;
        height: 501px;
        padding: 24px;
    }
}

.img-principal {
    width: 336px;
    height: 200px;

    @media (max-width: 375px) {
        width: 279;
        height: 200px;
    }
}

.card-container {
    padding: 24px;

    @media (max-width: 375px) {
        width: 279px;
        height: auto;
    }
}

.subtitulo-card {
    width: 82px;
    height: 29px;
    background-color: var(--yellow-color);
    text-align: center;
    border: none;
    border-radius: 5px;
    h2 {
        font-size: var(--font-size-subtitulo);
        color: var(--gray-950-color);
    }

    @media (max-width:375px) {
        width: 73px;
        height: 26px;

        h2 {
            font-size: 12px;
        }
    }
}

.descricao {
    font-size: var(--font-size-paragrafo);
    color: var(--gray-950-color);
    font-weight: var(--medium-bold);

    @media (max-width:375px) {
        font-size: 12px;
    }
}

a {
    font-size: var(--font-size-titulo);
    font-weight: var(--extra-bold);
    cursor: pointer;
    transition: color 0.5s ease;
    &:hover {
        color: var(--yellow-color);
    }

    @media (max-width:375px) {
        font-size: 20px;
    }
}

p{
    color: var(--gray-500-color);
    font-weight: var(--medium-bold);

    @media (max-width:375px) {
        font-size: var(--font-size-paragrafo);
    }
}

.perfil {
    width: 129px;
    height: 32px;
    display: flex;
    gap: 12px;
    align-items: center;
    padding-top: 24px;

    @media (max-width:375px) {
    .perfil img {
        width: 32px;
        height: 32px;
     }   
    }
}

.author {
    font-size: var(--font-size-paragrafo);
    font-weight: var(--extra-bold);
    color: var(--gray-950-color);
}