scssのメディアクエリが効かない

現在htmlとscssを使いモバイルファーストではにわマンさんの模写サイトを模写コーディングしています。
そこでレスポンシブ化をしようとしているのですが上手くいきません。
なぜ上手くいかないのか教えていただけないでしょうか？
下記にコードを載せておきます。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="css/stylesheet.css">
7  <title>Dental Clinic</title>
8</head>
9<body>
10  <header>
11    <img src="photo/siteTitle.png" alt="サイトのタイトルです。">
12    <div class="head-container">
13      <p>“地域に根付いた歯科医院” デンタル クリニック</p>
14      <p>03-0000-0000</p>
15      <p>予約受付時間 10:00～19:30 <span class="text-red">日祝 休診</span> </p>
16    </div>
17    <nav>
18      <button type="button" onclick="location.href='index.html'"><p>トップページ</p><p class="btn-text">HOME</p></button>
19      <button type="button" onclick="location.href='clinic.html'"><p>医院紹介</p><p class="btn-text">CLINIC</p></button>
20      <button type="button" onclick="location.href='service.html'"><p>診療案内</p><p class="btn-text">SERVICE</p></button>
21      <button type="button" onclick="location.href='staff.html'"><p>医院・スタッフ紹介</p><p class="btn-text">STAFF</p></button>
22      <button type="button" onclick="location.href='access.html'"><p>アクセス</p><p class="btn-text">ACCESS</p></button>    
23    </nav>   
24  </header>

scss
1$pc: 1024px; // PC
2
3@mixin pc {
4  @media screen and (min-width: ($pc)) {
5    @content;
6  }
7}
8
9
10body{
11 margin: 0;
12 color: rgb(81, 81, 81);;
13}
14header{
15 border-top:solid 8px #6CC6C4;
16  @include pc{
17    color: red;
18  }
19 img{
20   display: block;
21   margin: 0 auto;
22  }
23 .head-container{
24   text-align: center;
25   p:nth-of-type(1){
26     font-size: 10px;
27     margin: 0;
28   }
29   p:nth-of-type(2){
30     font-size: 30px;
31     margin: 0 ;
32   }
33   p:nth-of-type(3){
34     display: inline-block;
35     font-size: 10px;
36     margin: 0 0 15px;
37     padding: 0 15px ;
38     border: solid 1px rgba(0,0,0,0.3);
39     line-height: 30px;   
40     .text-red{
41       color: red;
42     }
43    }
44  }
45  nav{
46   display: flex;
47   flex-wrap: wrap;
48   height: 225px;
49   button{
50     display:block;
51     width: 50%;
52     height: 33%;
53     background-color: rgb(153, 225, 223);
54     border-radius: 5px;
55     border-right:#71C9C7 solid 1px ;
56     border-left:#99E1DF solid 1px ;
57     border-top: 0;
58     &:hover{
59       opacity: 0.5;
60       cursor: pointer;
61     }   
62    }
63    p{
64      font-weight: bold;
65      color: white;
66      margin: 0;
67    }
68    .btn-text{
69      font-size: 10px;
70      margin-top: 0;
71    }
72  }
73}