画面幅を変えると，背景画像が伸びる

前提・実現したいこと

画面幅を変更しても、背景画像を横方向に伸ばさないようにしたい。

該当のソースコード

html
1<body>
2 <a href="https://www.apple.com/jp/iphone-13-pro/" class="main__menu  main__menu__one">
3        <h2>
4          iPhone 13 Pro
5        </h2>
6        <h3>
7          すべてがプロ。
8        </h3>
9        <div class="main__menu--link">
10          <object><a href="https://www.apple.com/jp/iphone-13-pro/">さらに詳しく</a> <i class="bi bi-chevron-right"></i></object>
11          <object><a href="">購入</a><i class="bi bi-chevron-right"></i></object>
12        </div>
13     </a>
14</body>

sccs
1//breakpoint//
2$breakpoints: (
3  'sm': 'screen and (max-width: 734px)',
4  'md': 'screen and (max-width: 768px)',
5  'lg': 'screen and (max-width: 1068px)',
6  'xxl': 'screen and (max-width: 1500px)',
7) !default;
8@mixin mq($breakpoint: xxl) {
9  @media #{map-get($breakpoints, $breakpoint)} {
10    @content;
11  }
12}
13@mixin mq($breakpoint: lg) {
14  @media #{map-get($breakpoints, $breakpoint)} {
15    @content;
16  }
17}
18@mixin mq($breakpoint: md) {
19  @media #{map-get($breakpoints, $breakpoint)} {
20    @content;
21  }
22}
23@mixin mq($breakpoint: sm) {
24  @media #{map-get($breakpoints, $breakpoint)} {
25    @content;
26  }
27}
28
29@include mq(xxl) {
30    .main__menu{
31      height: 580px;
32      h2{
33        font-size: 40px;
34      }
35      h3{
36        font-size: 20px;
37        padding: 13px 0 20px 0;
38      }
39      .main__menu--link{
40        a{
41          font-size: 17px;
42        }
43        .bi-chevron-right{
44          margin-right: 25px;
45        }
46      }
47    }
48    .main__menu__one{
49      display: inline-block;
50      padding: 40px 0 10px 0;
51      background-image: url("img/hero_iphone_13pro__dhnsegysa42u_mediumtall_2x.jpg");
52      background-position: center;
53      background-size: cover;
54    }
55}