Возможна ли адаптивная загрузочная карусель?

Я пытаюсь создать главную страницу с заголовком, загрузочной каруселью и нижним колонтитулом. Пока это выглядит так:

Если не считать некоторых проблем с позиционированием, все выглядит хорошо. Проблема возникает, когда я решаю сделать его отзывчивым.

Под отзывчивостью я подразумеваю, что размер карусели подстраивается под размер браузера. Сейчас для высоты задано фиксированное значение 500px.

Если я решу изменить высоту на 100%, вся карусель исчезнет. Я пытался найти способ использовать сетку для решения своей проблемы, но не смог найти способ, чтобы сетка заполняла всю главную страницу.

Пока это небольшой фрагмент css из карусели:

.carousel {
    --main-height: 500px;
    height: var(--main-height);
    grid-area: carousel;
}

Вот фрагмент самой php-страницы:

<header id="navbar">
    <nav>
        <?php include "../includes/header.php"?>
    </nav>
</header>

<?php include "../includes/carousel.php"?>

<main>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
</main>

<footer>
    <?php include "../includes/footer.php"?>
</footer>

И вот кусок основного CSS, который устанавливает сетку:

body{
    background: linear-gradient(rgba(70,0,0,1),rgba(10,0,0,1)) no-repeat center center fixed;
    display:grid;
    grid-template-rows: 60px auto 150px;
    grid-template-columns: minmax(200px, 1fr) 12fr;
    grid-template-areas: "header header"
                         "main main "
                         "footer footer";
    grid-gap: 50px;
}

#frontpagebody{
    grid-template-rows: 60px auto auto 150px;
    grid-template-areas: "header header"
                         "carousel carousel"
                         "main main"
                         "footer footer";
    grid-gap: 0;
}

Что следует отметить: я попытался удалить все main в php вместе с упоминаниями main в теге body для конкретного идентификатора в основном css, из-за чего нижний колонтитул касался карусели, но в конце концов это все равно не помогло.

Есть ли способ установить высоту карусели, чтобы она заполняла промежуток между верхним и нижним колонтитулом, независимо от размера браузера? Или это просто невозможно?