CSS_sassを使い、レスポンシブ対応がわかりません

前提・実現したいこと

CSS_sassを使い、レスポンシブ対応させて、完成させる。

この際のBPは768px、PC向けの幅は1000pxとする。
完全模写する必要はなく、似た様な色で似た様な動きをすればOK。
下記の画像通りにレスポンスする

ネスト
@mixin
@content

を最低１回は使用すること。

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

エラーメッセージ

該当のソースコード

html
1コード
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width,initial-scale=1.0">
6    <style>
7
8        body{
9            margin: 0;
10            padding: 0;
11        }
12
13
14    </style>
15</head>
16<body>
17
18<footer>
19        <nav class="footB">
20            <div>
21                <h3>グラフィックデザイン学科</h3>
22                    <ul>
23                        <li><a href="#">グラフィックデザイン専攻</a></li>
24                        <li><a href="#">イラストデザイン専攻</a></li>
25                        <li><a href="#">広告デザイン専攻</a></li>
26                        <li><a href="#">パッケージデザイン専攻</a></li>
27                        <li><a href="#">出版デザイン専攻</a></li>
28                        <li><a href="#">Webデザイン専攻[デザインコース]</a></li>
29                        <li><a href="#">Webデザイン専攻[エンジニアコース]</a></li>
30                    </ul>
31            </div>
32
33            <div>
34                <h3>映像デザイン学科</h3>
35                    <ul>
36                        <li><a href="#">3DCG専攻</a></li>
37                        <li><a href="#">VFX専攻</a></li>
38                        <li><a href="#">モーショングラフィクス専攻</a></li>
39                        <li><a href="#">CG専攻</a></li>
40                    </ul>
41            </div>
42
43            <div>
44                <h3>イラストレーション学科</h3>
45                <ul>
46                    <li><a href="#">イラストレーション専攻</a></li>
47                    <li><a href="#">メディアイラスト専攻</a></li>
48                    <li><a href="#">デジタルイラスト専攻</a></li>
49                    <li><a href="#">ゲームイラスト専攻</a></li>
50                    <li><a href="#">キャラクターイラスト専攻</a></li>
51                    <li><a href="#">絵本作家専攻</a></li>
52                </ul>
53            </div>
54
55            <div>
56                <h3>プロダクトデザイン学科</h3>
57                    <ul>
58                        <li><a href="#">雑貨デザイン専攻</a></li>
59                        <li><a href="#">トイデザイン専攻</a></li>
60                        <li><a href="#">工業デザイン専攻</a></li>
61                        <li><a href="#">カーデザイン専攻</a></li>
62                        <li><a href="#">クラフトデザイン専攻</a></li>
63                    </ul>
64            </div>
65        </nav>
66
67    </div>
68</footer>
69
70</body>
71</html>

sass css

コード
.footB{
//ブレイクポイント
//$pb:1000px; //PC
//$mb:768px;  //モバイル

//pc
@mixin  pbmax{
}
//スマホ
@mixin  mbmax{
}

bgc{
    color: gray;   
}

$breakPoints:(

    "pbmax":"screen and (max-width:1000px)",
    "mbmax":"screen and (max-width:768px)"
);

@mixin mq($breakPoints:mbmax){
    @media #{map-get($breakPoints,$breakPoint)} {
        
    }
}
}