Помогите со стилем

Вот такие коды у меня на сайте в тильде

это блок хтмл:

<div class="filter-buttons">
    <button class="tn-atom category-filter" data-category="all">Все виды</button>
    <button class="tn-atom category-filter" data-category="category1">Категория 1</button>
    <button class="tn-atom category-filter" data-category="category2">Категория 2</button>
    <button class="tn-atom category-filter" data-category="category3">Категория 3</button>
</div>

<div class="card-container">
    <div class="card category1">
        <h3>Первая карточка название</h3>
        <p>Тут идёт описание объекта, тут идёт описание объекта, тут идёт описание объекта,
        тут идёт описание объекта,</p>
        <img src="https://sun9-10.userapi.com/impg/28qcMPlN0r2sIjTD1eSiTPCn7SEc2iTPWyWSgA/SzOJnJRs0as.jpg?size=807x807&quality=96&sign=faa3c8ed67a802bec1300a56bf6188ec&c_uniq_tag=2Kyp-_25np693yMIYJ8qcSmTrJcpFn2rPm7hEXtdKbk&type=album" alt="Image 1">
        <a class="details-button" href="URL_1" target="_blank">Подробнее</a>
    </div>

    <div class="card category2">
        <h3>Заголовок 2</h3>
        <p>Краткое описание 2</p>
        <img src="path/to/image2.jpg" alt="Image 2">
        <a class="details-button" href="#case_1">Подробнее</a>
    </div>

    <div class="card category3">
        <h3>Заголовок 3</h3>
        <p>Краткое описание 3</p>
        <img src="path/to/image3.jpg" alt="Image 3">
        <a class="details-button" href="#case_2">Подробнее</a>
    </div>

    <div class="card category1">
        <h3>Заголовок 4</h3>
        <p>Краткое описание 4</p>
        <img src="path/to/image4.jpg" alt="Image 4">
        <a class="details-button" href="#case_3">Подробнее</a>
    </div>

    <div class="card category2">
        <h3>Заголовок 5</h3>
        <p>Краткое описание 5</p>
        <img src="path/to/image5.jpg" alt="Image 5">
        <a class="details-button" href="#case_4">Подробнее</a>
    </div>

    <div class="card category3">
        <h3>Заголовок 6</h3>
        <p>Краткое описание 6</p>
        <img src="path/to/image6.jpg" alt="Image 6">
        <a class="details-button" href="#case_5">Подробнее</a>
    </div>
</div>

и вот такой код в css файле:

<style>
/* Общие стили */
body {
    font-family: 'Ubuntu', sans-serif;
    margin: 0;
}

/* Основные стили для карточек и их контейнера */
.card-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(33.33% - 40px), 1fr));
    grid-gap: 20px;
    margin: 60px; /* Увеличен верхний отступ, отступы справа и слева 60px */
    box-sizing: border-box;
}

.card {
    box-sizing: border-box;
    background-color: #F5F5F5;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    padding-bottom: 30px; /* Уменьшено расстояние от описания до конца карточки */
}

/* Заголовок */
.card h3 {
    font-family: 'Ubuntu Medium', sans-serif;
    margin-top: 10px;
    margin-left: 10px; /* Добавлен отступ слева к заголовку */
}

/* Краткое описание */
.card p {
    font-family: 'Ubuntu Light', sans-serif;
    margin-left: 10px; /* Добавлен отступ слева к краткому описанию */
    margin-bottom: 5px; /* Небольшое расстояние между заголовком и описанием */
}

/* Картинка */
.card img {
    width: 100%;
    height: auto;
    margin-top: 20px; /* Увеличен отступ от описания до изображения */
    margin-bottom: 20px; /* Увеличен отступ от изображения до кнопки */
}

/* Стили для кнопок фильтрации */
.filter-buttons {
    text-align: center; /* Центрируем кнопки */
    margin-top: 60px; /* Отступ сверху уравнен к отступу до карточек */
    margin-bottom: 20px;
}

.filter-buttons button {
    cursor: pointer;
    margin: 5px;
    padding: 8px 12px;
    background-color: #FF9040 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    transition: background-color 0.3s ease !important;
    font-family: 'Ubuntu', sans-serif !important;
    font-weight: normal !important;
}

.filter-buttons button:hover {
    background-color: #FF7040 !important;
<style>
/* Ваши стили */

/* Стили для кнопок "Подробнее" */
.details-button {
    display: inline-block;
    margin-top: 30px; /* Увеличен отступ сверху от кнопки до карточки */
    margin-bottom: 30px; /* Увеличен отступ снизу от кнопки до конца карточки */
    padding: 15px 20px; /* Увеличен размер кнопки */
    background-color: #FF9040;
    color: #fff;
    text-decoration: none;
    border: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    cursor: pointer; /* Добавлен курсор */
    font-family: 'Ubuntu Medium', sans-serif; /* Указан шрифт */
}

.details-button:hover {
    background-color: #FF7040;
}
</style>

</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
    var filterButtons = document.querySelectorAll('.category-filter');
    var cards = document.querySelectorAll('.card');

    filterButtons.forEach(function (button) {
        button.addEventListener('click', function () {
            var category = this.getAttribute('data-category');

            cards.forEach(function (card) {
                if (category === 'all' || card.classList.contains(category)) {
                    card.style.display = 'block';
                } else {
                    card.style.display = 'none';
                }
            });
        });
    });
});
</script>

Но кнопка Подробнее все также без стиля! Помогите!

описание картинки