カルーセル表示画像の上にテキスト配置したい

【やりたいこと】
・PC表示／SP（レスポンシブ）表示の２種類
・カルーセルで画像を表示（画像：３枚）
・カルーセル画像の上にタイトルテキスト２行を中央配置

【参照】
下記イラスト画像２枚のような状態にしたいです。

【できていないこと】
・**display: none;**指定しているのにPC／SPのカルーセルが常に２つウィンドウに表示されてしまう。
・title　h1 h2が真ん中に来ない。headerとcoverの間に白い余白(title　h1 h2の分)ができてしまう。

初歩的なご質問で大変申し訳ございません。
どなたか詳しい方にご教示頂ければ幸いです。
よろしくお願いいたします。

【HTML】
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample Shop</title>
    <meta name="description" content="ページの説明が入ります">

    <!-- CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
    <link rel="stylesheet" href="./css/style.css">
    <!-- カルーセル -->
    <!-- Add the slick-theme.css if you want default styling -->
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
    <!-- Add the slick-theme.css if you want default styling -->
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />

    <!-- FontAwesome -->
    <script src="https://kit.fontawesome.com/0f595899ca.js" crossorigin="anonymous"></script>

</head>

<body>


    <!-- ヘッダー -->
    <header class="header">
            <a href="index.html" class="logo1"><img src="./images/logo/logo.png" alt="Sample Shop"></a>
            <a href="index.html" class="logo2"><img src="./images/logo/logo_sp.png" alt="Sample Shop"></a>
            <div id="nav-button" class="nav-button"><i class="fas fa-bars" aria-label="menu"></i></div>
            <!-- SPナビゲーション -->
            <nav class="sp-nav">
                <ul class="sp-nav-list">
                    <li><a href="information.html">INFORMATION</a></li>
                    <li><a href="about.html">ABOUT</a></li>
                    <li><a href="menu.html">MENU</a></li>
                </ul>
            </nav>
            <!-- PCナビゲーション -->
            <nav class="pc-nav">
                <ul class="pc-nav-list">
                    <li><a href="information.html">INFORMATION</a></li>
                    <li><a href="about.html">ABOUT</a></li>
                    <li><a href="menu.html">MENU</a></li>
                </ul>
            </nav>
    </header>
    
    
    <!-- カバー -->
    <div class="cover">
        <div class="title">
            <h1>Have a wonderful time</h1>
            <h2>Organic Cafe & Restaurant</h2>
        </div>
        <!-- SPカルーセル -->
        <div class="carousel sp">
            <div><img src="./images/carousel/sp_slide_1.jpg" alt="photo"></div>
            <div><img src="./images/carousel/sp_slide_2.jpg" alt="photo"></div>
            <div><img src="./images/carousel/sp_slide_3.jpg" alt="photo"></div>
        </div>
        <!-- PCカルーセル -->
        <div class="carousel pc">
            <div><img src="./images/carousel/pc_slide_1.jpg" alt="photo"></div>
            <div><img src="./images/carousel/pc_slide_2.jpg" alt="photo"></div>
            <div><img src="./images/carousel/pc_slide_3.jpg" alt="photo"></div>
        </div>
    </div>


    <!-- JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
    <script src="./js/carousel.js"></script>
    <script src="./js/hamburger.js"></script>

</body>

</html>

【Sass】
.cover {
    position: relative;
    width: 100%;
    height: auto;
    align-items: center;
    justify-content: center;
    z-index: 50;
}


.title {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: $white;
    z-index: 1000;
　　padding: 23.5rem 4rem 28.5rem;
　　h1 {
　　    font-size: 3.2rem;
　　}
　　h2 {
　　    font-size: 2.4rem;
    }
    @media (min-width: 769px) { //pc
        padding: 22.4rem 32.3rem 300rem;
        h1: font-size: 8rem;
        h2: font-size: 4.8rem;
    }
}

    .carousel sp {
        @media (min-width: 769px) {
            display: none;
        }
    }


    .carousel pc {
        @media (max-width: 768px) {
            display: none;
        }
    }