【難しいです】3の画像を横並び、かつ画像上に文字、レシポンシブにするのに、手こずっています。

Question

前提・実現したいこと

３つの画像を横並びにしたいです。
かつ、画像の上には文字を、レシポンシブデザインを使用したいです。

エラー内容

現状、display: flex；を使用して、画像の横並びと、画像の上に文字の設置はできています。

問題1：レシポンシブデザインの@mediaを使用しても、横並びのまま画像が崩れてしまいます。

問題２：image2の画像が表示されない

該当のソースコード

<div class="images"> <div class="image1"> <div class="program-text"> <a class="image-text" href="#">プログラム</a> </div> </div> <div class="image2"> <div class="performer-text"> <a class="image-text" href="#">インストラクター</a> </div> </div> <div class="image3"> <div class="studio-text"> <a class="image-text" href="#">施設案内</a> </div> </div> </div>

.images{
	padding: 50px 20px;
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
	width: 100%;
	margin-top: 50px;
}

.image1{
	 position: relative;
	  background-image: url("http://usa2.local/wp-content/uploads/2021/01/geert-pieters-3RnkZpDqsEI-unsplash-scaled-e1610095510877.jpg");
    background-size: cover;
    background-position: center;
    -webkit-background-size: cover;
    width: 334px;
	 height: 350px;
   margin: auto; 
    }
    

.image2{
	 position: relative;
     background-image: url("http://usa2.local/wp-content/uploads/2021/01/d27019-90-592811-1.jpg");
    background-size: cover;
    background-position: center;
    -webkit-background-size: cover;
    width: 334px;
	  height: 350px;
    margin: auto;
    }
    
.image3{
	 position: relative;
    background-image: url("http://usa2.local/wp-content/uploads/2021/01/pexels-photo-3757950.jpeg");
    background-size: cover;
    background-position: center;
    -webkit-background-size: cover;
    width: 334px;
	  height:350px;
   margin : auto;
    }
    
a{
	color: white;
}

.program-text{
	font-size: 24px;
	font-weight: bold;
	position: absolute;	
  padding: 157px 79px;
    margin: 0 auto;
    width:100%;
    background: rgba(0, 0, 0, 0.5);
    }

.performer-text{
	font-size: 24px;
	font-weight: bold;
	position: absolute;	
  padding: 157px 55px;
    margin: 0 auto;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);

	
}



.studio-text{
	font-size: 24px;
	font-weight: bold;
	position: absolute;	
  padding: 157px 79px;
    margin: 0 auto;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
}



    
.image-text{
    color: #fff;
    font-size: 27px;
    line-height: 1.2;
    letter-spacing: 4;
    margin-bottom: 10px;
    text-shadow: 0 0 20px;
    text-decoration: none;
    }







 @media screen and (max-width: 480px) {
    	 
	 .iamges{ 
        display: none;
        }
    
    .images .image1 .program-text{
        width: 100%;
        margin: 0 auto;
        }
    
    .images .image2{
        width: 100%;
        margin: 0 auto;
        }
    
    .images .image3{
        width: 100%;
        margin: 0 auto;
        }
	 
 }


@media screen and (min-width:481px) and ( max-width:960px)
{
     
	.iamges{
        display: block;
        }
    
    .images .image1{
        width: 100%;
        margin: 0 auto;
        }
    
    .images .image2{
        width: 100%;
        margin: 0 auto;
        }
    
    .images .image3{
        width: 100%;
        margin: 0 auto;
        }
	
 }

試したこと

レシポンシブのmax-widthなども何回か変更委しましたが駄目でした。
ググりまくっても、なぜ表示されないのかわかりませんでした。

補足情報（FW/ツールのバージョンなど）

AWSの使用

Comments

[m.ts10806]

>【難しいです】
これなくてもいいかと。「初心者です」と伝えたいのでしたら質問に「初心者アイコン」をつけられるので、それだけにとどめてください。質問は編集できます。

Answer 1

質問１のメディアクエリが効かない原因については、

 @media screen and (max-width: 480px) {

     .iamges{ 
        display: none;
        }

上記の.iamgesが.imagesのタイポです。

問題２に関しては、画像ファイルのパスが間違っているぐらいしか思いつかないです。

Comments

[Omiiii]

ご回答誠にありがとうございます。
ケアレスミスを再度確認して、仕上げていきます。