画像やテーブルのレスポンシブ対応について

前提・実現したいこと

【画像とテーブル】のレスポンシブが
画像だとvw,vhを使い、

教えてください！
対策や工夫が知りたいです！
何卒宜しくお願い致します。

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

レスポンシブでpx変更しようとしても、画像が一定の大きさにしかならない

該当のソースコード

HTML
1 <section class="features">
2        <div class="inner blog-bg">
3            <p class="jp-ttl data-aos=fade">ユアコーディング3つの特徴</p><!-- /.jp-ttl -->
4            <p class="en-ttl">FEATURES</p><!-- /.en-ttl -->
5
6                <!--1-->
7                <h4 class="features-ttl data-aos=fade">高速コーディング</h4><!--features-ttl / --> 
8                <ul class="features-list data-aos=fade">
9                    <li class="features-item features-flex">
10                        <figure><img class="feat-img" src="./image/cto.png"  alt=""></figure>
11                            <div class="features-txt">
12                                <p class="feat-sub">コーディングに特化したフリーランスのため、 <br> スピード感を持った開発が可能。</p>
13                                <p class="features-desc">開発は常にスピードとの勝負です。<br> ユアコーディングはコーディングに特化しているため、 <br> 素早く納品することで、クライアントがデザインに注力 <br> する助けとなります。</p><!-- /.feat-dec -->
14                            </div><!-- /.feat-txt -->
15                    </li><!-- /.features-item -->
16                </ul><!-- /.features-list -->
17                
18                <!--2-->
19                <h4 class="features-ttl data-aos=fade">高品質</h4><!--features-ttl / --> 
20                <ul class="features-list">
21                    <li class="features-item features-flex">
22                        <figure><img class="feat-img" src="./image/building_website.png" alt=""></figure>
23                        <div class="features-txt">
24                            <p class="feat-sub">正しいマークアップで、 内部SEOに強いコーディングを デフォルトで行います。</p>
25                            <p class="feat-desc">ユアコーディングでは、「予測しやすい」「再利用しやすい」<br> 「保守しやすい」「拡張しやすい」と言った設計をもとに <br> きちんとコーディングを行うため、納品後も安心です。</p><!-- /.feat-dec -->
26                        </div><!-- /.feat-txt -->
27                    </li><!-- /.features-item -->
28                </ul><!-- /.features-list -->
29
30                <!--3-->
31                <h4 class="features-ttl">迅速なレスポンス</h4><!--features-ttl / --> 
32                <ul class="features-list">
33                    <li class="features-item features-flex">
34                        <figure><img class="feat-img" src="./image/new_message.png" alt=""></figure>
35                        <div class="features-txt">
36                            <p class="feat-sub">原則いただいたメッセージは、 業務時間内であれば6時間以内に お返しいたします。</p>
37                            <p class="feat-desc">連絡を返さないフリーランスが多い中、 <br> ユアコーディングでは定期的な進捗報告など、 <br> 社会人としての基本を踏まえて仕事を行なって <br> おります。</p><!-- /.feat-dec -->
38                        </div><!-- /.feat-txt -->
39                </li><!-- /.features-item -->
40            </ul><!-- /.features-list -->
41        </div>
42    </section><!-- /.features -->
43

feat.scss
1.features{
2    .features-ttl{
3        font-size: 2.8rem;
4        line-height: 1.4;
5        color: $txt-color;
6        font-weight: bold;
7        text-align: center;
8        @include overTab{
9            margin-bottom: 40px;
10            font-size: 2.25rem;
11        }
12       
13    }
14
15    .features-list{
16        margin: 0 auto;
17        
18            .features-item{
19                display: flex;
20                justify-content: space-between;
21                align-items: center;
22                margin-top: 50px;
23                @include overTab{
24                    flex-direction: column;
25
26                }
27
28                .feat-img{
29                    display: block;
30                    max-width: 380px;
31                    > img{
32                        width: 100%;
33                    }
34                    
35                    @include overTab{
36                        margin-bottom: 30px;
37                        
38                    }
39                
40                }
41
42                .features-item:nth-child(even) {
43                    display: flex;
44                    flex-direction: row-reverse;
45                    .feat-img{
46                        display: block;
47                        width: 380px;
48                        margin-right: 130px;
49    
50                    }
51                }
52            }
53
54                
55                .features-txt{
56                    width: 500px;
57                    height: 350px;
58                    
59                    
60                    .feat-sub{
61                        display: block;
62                        font-size: 2.4rem;
63                        line-height: 2;
64                        font-weight: bold;
65                        margin-bottom: 54px;
66                        @include overTab{
67                            margin-bottom: 30px;
68                            font-size: 2.0rem;
69                        }
70
71                    }
72                    .feat-desc{
73                        line-height: 1.6;
74                        @include overTab{
75
76                            font-size: 1.5rem;
77                        }
78
79                    }
80                }    
81        
82    }
83}

CSS
1.features .features-ttl {
2  font-size: 2.8rem;
3  line-height: 1.4;
4  color: #333;
5  font-weight: bold;
6  text-align: center;
7}
8
9@media print, screen and (max-width: 1024px) {
10  .features .features-ttl {
11    margin-bottom: 40px;
12    font-size: 2.25rem;
13  }
14}
15
16.features .features-list {
17  margin: 0 auto;
18  padding: 0;
19}
20
21.features .features-list .features-item {
22  display: -webkit-box;
23  display: -webkit-flex;
24  display: -ms-flexbox;
25  display: flex;
26  -webkit-box-pack: justify;
27  -webkit-justify-content: space-between;
28      -ms-flex-pack: justify;
29          justify-content: space-between;
30  -webkit-box-align: center;
31  -webkit-align-items: center;
32      -ms-flex-align: center;
33          align-items: center;
34  margin-top: 50px;
35}
36
37@media print, screen and (max-width: 1024px) {
38  .features .features-list .features-item {
39    -webkit-box-orient: vertical;
40    -webkit-box-direction: normal;
41    -webkit-flex-direction: column;
42        -ms-flex-direction: column;
43            flex-direction: column;
44  }
45}
46
47.features .features-list .features-item .feat-img {
48  display: block;
49  max-width: 380px;
50}
51
52.features .features-list .features-item .feat-img > img {
53  width: 100%;
54}
55
56@media print, screen and (max-width: 1024px) {
57  .features .features-list .features-item .feat-img {
58    margin-bottom: 30px;
59  }
60}
61
62.features .features-list .features-item .features-item:nth-child(even) {
63  display: -webkit-box;
64  display: -webkit-flex;
65  display: -ms-flexbox;
66  display: flex;
67  -webkit-box-orient: horizontal;
68  -webkit-box-direction: reverse;
69  -webkit-flex-direction: row-reverse;
70      -ms-flex-direction: row-reverse;
71          flex-direction: row-reverse;
72}
73
74.features .features-list .features-item .features-item:nth-child(even) .feat-img {
75  display: block;
76  width: 380px;
77  margin-right: 130px;
78}
79
80.features .features-list .features-txt {
81  width: 500px;
82  height: 350px;
83}
84
85.features .features-list .features-txt .feat-sub {
86  display: block;
87  font-size: 2.4rem;
88  line-height: 2;
89  font-weight: bold;
90  margin-bottom: 54px;
91}
92
93@media print, screen and (max-width: 1024px) {
94  .features .features-list .features-txt .feat-sub {
95    margin-bottom: 30px;
96    font-size: 2.0rem;
97  }
98}
99
100.features .features-list .features-txt .feat-desc {
101  line-height: 1.6;
102}
103
104@media print, screen and (max-width: 1024px) {
105  .features .features-list .features-txt .feat-desc {
106    font-size: 1.5rem;
107  }
108}
109