<div class="map">
  <iframe src="https://www.google.com/maps/..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>

.map {
	position: relative;
	padding-top: 56.25%; /* 9÷16×100 */
}
.map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.map {
	position: relative;
	max-width: 700px;
	margin: auto;
}
.map::before {
	content: "";
	display: block;
	padding-top: 56.25%; /*ここにつける*/
}
.map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.map {
	max-width: 700px;
	margin: auto;
	aspect-ratio: 16 / 9;
}
.map iframe {
	width: 100%;
	height: 100%;
}

.card {
	display: block;
	border: 1px solid #e7e7e7;
	border-radius: 5px;
	color: inherit;
	text-decoration: none;
	transition: color .3s;
}
.card__txt {
	margin: 20px;
}

<ul class="cardList">
  <li class="cardList__item">
    <a href="#" class="card _card01">
      <p class="card__txt">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
    </a>
  </li>
  <li class="cardList__item">
    <a href="#" class="card _card02">
      <p class="card__txt">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
    </a>
  </li>
</ul>

.card::before {
	content: "";
	display: block;
	padding-top: 56.25%;
	border-radius: 5px 5px 0 0;
	background-position: center center;
	background-size: cover;
	transition: .3s;
}
/*サムネイル画像指定*/
.card._card01::before {
	background-image: url(img/001.jpg);
}
.card._card02::before {
	background-image: url(img/002.jpg);
}

<ul class="cardList">
  <li class="cardList__item">
    <a href="#" class="card" style="background-image: url(img/001.jpg);">
      <p class="card__txt">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
    </a>
  </li>
</ul>

<ul class="cardList">
  <li class="cardList__item">
    <a href="#" class="card">
      <div class="card__thumb"><img src="img/001.jpg" alt="写真：赤いハイビスカス"></div>
      <p class="card__txt">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
    </a>
  </li>
  <li class="cardList__item">
    <a href="#" class="card">
      <div class="card__thumb"><img src="img/002.jpg" alt="写真：青い空とヤシの木"></div>
      <p class="card__txt">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
    </a>
  </li>
</ul>

.card__thumb {
	position: relative;
	transition: .3s;
}
.card__thumb::before {
	content: "";
	display: block;
	padding-top: 56.25%;
}
.card__thumb img {
	position: absolute;
	left: 0;
	top: 0;
	max-width: none;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 5px 5px 0 0;
}