【html/css】div要素ボックス内の右上に画像をレスポンシブで配置したい

html/cssで下記のような完成形を目指しているのですが、各ボックスの右上に上手く画像が配置できません。

下記が現在のコードなのですが、pタグのdetailのテキストとかぶらないように右上の画像をレスポンシブで配置したいです。
アドバイスをお願いします。

html
1<div class="cards">
2    <div class="card">
3        <img class="img" src="./img/sample-img.png">
4        <p class="title">sample title</p>
5        <p class="detail">xxxxxx discription xxxxxx</p>
6    </div>
7    <div class="card">
8        <img class="img" src="./img/sample-img.png">
9        <p class="title">sample title</p>
10        <p class="detail">xxxxxx discription xxxxxx</p>
11    </div>
12</div>

css
1.card {
2    color: black;
3    padding: 1rem;
4    overflow: visible;
5    border: solid 1px black;
6}
7
8.cards {
9    max-width: 1200px;
10    margin: 0 auto;
11    display: grid;
12    grid-gap: 1rem;
13}
14@media (min-width: 600px) {
15    .cards {
16        grid-template-columns: repeat(1, 1fr);
17    }
18}
19
20@media (min-width: 900px) {
21    .cards {
22        grid-template-columns: repeat(2, 1fr);
23    }
24}

行動規範の内容に同意します

回答1件

ベストアンサー

下記でどうでしょうか。

css
1.card {
2    color: black;
3    padding: 1rem;
4    overflow: visible;
5    border: solid 1px black;
6    position: relative; /*追加*/
7    min-height: 180px;  /*追加 画像の高さ + 余白 */
8    padding-right: 180px;/*追加  画像の幅 + 余白 */
9}
10/*以下追加*/
11.card > img {
12    position: absolute;
13    right: 1rem;
14}