Olá, Othavio! Tudo bem?

Pelo que entendi, você está tentando alinhar a âncora "Saiba mais" com a imagem do card em diferentes tamanhos de tela, certo?

Uma solução possível seria utilizar flexbox para alinhar os elementos dentro do card. No seu caso, você poderia fazer algo assim:

.card__descricao {
  display: flex;
  justify-content: space-between;
  align-items: center; /* Adicionado para alinhar verticalmente */
}

E para o botão "Saiba mais", você poderia tentar algo como:

.card__botoes {
  display: flex;
  justify-content: space-between;
  align-items: center; /* Adicionado para alinhar verticalmente */
}

Isso deve alinhar o botão "Saiba mais" com a imagem do card. Lembre-se de ajustar as margens e o padding conforme necessário para obter o posicionamento desejado.

Espero ter ajudado e bons estudos!

Olá, Obrigado pela ajuda, mas eu estava me referindo ao tamanho, mas já consegui arrumar. Mudei a disposição dos elementos do card para flex column. E transformeis essas colunas em flex também para conseguir ajustar os items de dentro.

no final ficou assim: HTML:

<section class="card">
    <div class="card__esquerda">
      <div class="descricao">
        <h3 class="descricao__titulo">
          Talvez você também se interesse por...
        </h3>
        <h2 class="produto__nome">Angular 11 e Firebase</h2>
        <p class="descricao__texto">
          Construindo uma aplicação integrada com a plataforma do Google.
        </p>
      </div>
      <ul class="lista-botoes">
        <li class="lista-botoes-item">
          <img src="./Assets/Favoritos.svg" alt="favoritar produto" />
        </li>
        <li class="lista-botoes-item">
          <img src="./Assets/Compras.svg" alt="adicionar ao carrinho de compras" />
        </li>
      </ul>
    </div>

    <div class="card__direita">
      <div class="div-card__imagem">
      <img class="card__imagem" src="./Assets/angularlogo.svg" alt="Logo do Angular">
      </div>
      <div class="div-card__link">
      <a class="card__link" href>Saiba mais</a>
      </div>
    </div>
  </section>

CSS:

.card {
  padding: 3%;
  margin: 5%;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  background-color: var(--branco);
  border-radius: 18px;
  display: flex;
  flex-direction: column 50%;
}
.card__esquerda {
  margin-right: 10%;
}
.descricao__titulo {
  color: var(--cor-titulos);
  font-size: 1rem;
  font-weight: 700;
  margin-top: 3%;
}
.produto__nome {
  color: var(--azul-nomes);
  font-size: 1.12rem;
  font-weight: 700;
  padding: 10% 0;
}

.lista-botoes {
  display: flex;
}
.lista-botoes-item {
  margin: 10% 7% 0;
}

.descricao__texto {
  color: var(--texto-descricao);
  font-size: 0.8rem;
}

.card__direita{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}



.card__imagem {
  width: 100%;
}

.div-card__link{
  width: 100%;
  padding: 10% 0;
  margin-top: 10%;
  background: var(--cor-titulos);
  text-align: center;
  
}
.card__link {
    text-decoration: none;
    color: var(--branco);
    font-weight: 700;
    top: 100%;
}

@media screen and (min-width: 1024px) {
  .card{
    width: 50%;
    margin: 5% auto;
  }
}