Card com Grid

Resolvi usar grid nos cards para dar uma praticada no assunto:

<section class="card">
                <div class="card-description">
                    <img src="img/Estrelinhas.svg" alt="Cinco estrelas" class="card-description__rating">
                    <h3 class="card-description__subtitle">Autora do Mês</h3>
                    <h2 class="card-description__title">Juliana Agarikov</h2>
                    <p class="card-description__text">Analista de sistemas e escritora, Juliana é especialista em Front-End. </p>
                </div>

                <div class="card-buttons">
                    <ul class="buttons">
                        <li class="buttons__item"><img src="img/Favoritos.svg" alt="Adicionar aos favoritos"></li>
                        <li class="buttons__item"><img src="img/Sacola.svg" alt="Adicionar ao carrinho"></li>
                    </ul>
                </div>

                <a href="#" class="card-buttons__link">Saiba mais</a>

                <img src="img/Perfil-escritora-1.png" alt="Foto de Juliana Agarikov" class="card-image">
            </section>

.card {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr auto;
    margin: 1em;
    padding: 1em;
    background-color: var(--white);
    border-radius: 10px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    row-gap: 1em;
}

.card-description {
    display: flex;
    flex-direction: column;
    grid-column: 1;
    grid-row: 1;
    row-gap: 0.5em;
}

.card-description__rating {
    height: 15px;
    width: fit-content;
    display: inline-block;
    margin-bottom: 0.5em;

}

.card-description__subtitle {
    font-weight: 700;
    color: var(--yellow);
}

.card-description__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--blue);
}

.card-description__text {
    font-size: 14px;
}

.card-buttons {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    align-items: center;
}

.buttons {
    display: flex;
    align-items: center;
}

.buttons__item {
    margin: 0 0.5em;
}

.card-buttons__link {
    grid-column: 2;
    grid-row: 2;
    background-color: var(--yellow);
    color: var(--white);
    text-decoration: none;
    font-weight: 700;
    padding: 1em 1.5em;
    text-align: center;
}


.card-image {
    width: 100%;
}