display:noneについて

前提・実現したいこと

FLOWERの模写中です。FLOWERのサイト

【レスポンシブ】
幅760pxまではdiv.btn2sだけを表示させ、幅760px以上の時にdiv.btn1sだけを表示させたいのですが
下記の通りでは消すことができませんでした。※div.btn1 imgだと消すことができます(幅760以下）

どなたかどこが間違っているか教えて頂けますでしょうか。ご回答宜しくお願い致します。

発生している問題・エラーメッセージ

html
1<!-- header2 start -->
2      <div class="header2">
3
4        <!-- header2-btn start-->
5        <div class="btn1s">
6
7          <div class="btn1">
8            <a href="#">
9              <img src="img/btn_app.png" alt="">
10            </a>
11          </div>
12
13          <div class="btn1">
14            <a href="#">
15              <img src="img/btn_google .png" alt="">
16            </a>
17          </div>
18
19        </div>
20
21       <!-- header2-Responsive btn -->
22      <div class="btn2s">
23        <div class="btn2">
24          <a href="#">
25            <img src="img/btn_app.png" alt="">
26          </a>
27        </div>
28
29        <div class="btn2">
30          <a href="#">
31            <img src="img/btn_google .png" alt="">
32          </a>
33        </div>
34
35      </div>

該当のソースコード

CSS
1/* Responsive MAX 760px */
2@media screen and (max-width : 760px) {
3  .btn1s{
4    display: none;
5  }
6  
7}
8@media screen and (min-width : 760x) {
9  .btn2s{
10    display: none;
11  }
12}
13
14/*btn*/
15
16.btn1s{
17  display: flex;
18  justify-content: center;
19}
20
21.btn1 img,.btn2 img{
22width: 17rem;
23height: 6rem;  
24  padding: 0.8rem 0.8rem;
25}
26
27  
28  
29
30.btn2s{
31  position:absolute;
32  bottom: 0;
33  left: 0;
34  right: 0;
35  margin: auto;
36  display: flex;
37  justify-content: center;
38  padding: 3rem 0;
39  background-color: rgba(255,255,255, 0.7);
40}
41