Графическое бинго

[html]
<style>
/* Общие стили для страницы
body {
margin: 20px auto!important;
font-family: 'Roboto', sans-serif;
background-color: #ebebeb;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 10px;
box-sizing: border-box;
} */

/* Основной блок-контейнер, который содержит фоновую картинку */
.main-container {
position: relative; /* Необходим для позиционирования псевдоэлемента */
width: 100%;
max-width: 800px; /* Ограничиваем максимальную ширину контейнера */
min-width: 500px;
min-height: 500px; /* Минимальная высота основного блока */
border-radius: 12px;
overflow: hidden; /* Скрывает содержимое, выходящее за границы */
box-shadow: 0 0px 8px rgba(0, 0, 0, 0.2);
display: flex; /* Используем flexbox для центрирования внутреннего контента */
justify-content: center;
align-items: center;
margin: 0 auto;
padding: 30px; /* Отступ внутри контейнера */
box-sizing: border-box;
}

/* Псевдоэлемент для фоновой картинки с прозрачностью */
.main-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://forumstatic.ru/files/001c/60/80/30626.jpg?v=1'); /* Пример URL картинки */
background-size: cover; /* Картинка покрывает весь фон */
background-position: center; /* Центрирование картинки */
background-repeat: no-repeat;
z-index: 0; /* Помещаем псевдоэлемент под содержимое */
}

/* Обертка для всего содержимого внутри main-container (текст + выпадающие колонки) */
.content-wrapper {
position: relative; /* Важно, чтобы содержимое было поверх ::before */
z-index: 1; /* Поднимаем содержимое на передний план */
background-color: rgba(0, 0, 0, 0.55); /* Полупрозрачный белый фон для содержимого */
padding: 40px;
border-radius: 8px;
box-shadow: 0 3px 8px rgba(0,0,0,0.4);
max-width: 750px; /* Максимальная ширина обертки содержимого */
min-width: 400px;
width: 100%;
display: flex;
flex-direction: column;
gap: 20px; /* Отступ между текстовым блоком и выпадающими колонками */
box-sizing: border-box; }

/* Блок с заголовком и основным текстом */
.text-block {
background-color: #ebebeb; /* Явный белый фон для текстового блока */
padding: 20px;
border-radius: 6px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
text-align: center;
height: auto;
}

.text-block h4 {
color: #2e2e2e;
margin-top: 0;
margin-bottom: 10px;
font-size: 2.2em;
font-weight: 700;
}

.text-block p {
color: #2e2e2e;
line-height: 1.7;
font-size: 1.1em;
text-align: justify;
}

/* Контейнер для выпадающих колонок */
.dropdown-columns-container {
width: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 15px;
}

/* Стиль для каждой выпадающей колонки (тег <details>) */
details {
border: 1px solid #e4e9e5;
border-radius: 8px;
margin-bottom: 15px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
transition: box-shadow 0.3s ease;
background-color: #ebebeb; /* Явный белый фон для каждой колонки */
}
details:last-child {
margin-bottom: 0;
}

/* Стиль для открытой колонки */
details[open] {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Стиль для заголовка выпадающей колонки (тег <summary>) */
summary {
background-color: #ebebeb;
padding: 18px 25px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.4em;
font-weight: 600;
color: #2e2e2e;
transition: background-color 0.3s ease;
outline: none; /* Убираем стандартную обводку при фокусе */
list-style: none; /* Убираем стандартный маркер-треугольник */
}

summary::-webkit-details-marker, /* Для Webkit-браузеров */
summary::marker { /* Стандартный синтаксис */
display: none;
}

summary:hover {
background-color: #ebebeb;
}

summary h3 {
margin: 0;
font-size: 1.3em; /* Меньший размер для заголовка внутри хедера */
font-weight: 600;
}

/* Иконка для переключения (+/-) - используем псевдоэлемент на summary */
summary::after {
content: url('https://s.iimg.su/s/09/7rZ93VupYnETvSj1mkAlNTEUayBnW1t2JrqMnIfG.png'); /* Изначально показываем плюс */
font-size: 1.5em;
font-weight: bold; transition: transform 0.3s ease;
color: #007bff;
}

details[open] summary::after {
content: url('https://s.iimg.su/s/09/pJs4OlXDKdKw58FbilvitKsDvjXmLYaiwSdStGos.png'); /* Или '-' для закрытия, 'x' выглядит как поворот '+' */
transform: rotate(45deg); /* Поворот для "X" */
}

/* Содержимое выпадающей колонки (внутри <details>, но не <summary>) */
.dropdown-content {
background-color: #ebebeb;
padding: 20px 25px; /* Постоянный padding, так как нет анимации max-height */
color: #2e2e2e;
line-height: 1.6;
}

.dropdown-content p {
margin-top: 0;
margin-bottom: 15px;
font-weight: 500;
font-size: 1.2em;
}

.dropdown-content ul {
margin-top: 0;
margin-bottom: 15px;
padding-left: 20px;
}

/* Стили для слайдера - те же, что у вас */
.slider-block {
background-color: #ebebeb;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
height: 400px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
overflow: hidden;
width: 100%;
}

.slider-content-area {
width: 100%;
flex-grow: 1;
position: relative;
overflow: hidden;
}

.slide {
display: none; /* Скрыт по умолчанию */
flex-direction: column;
align-items: center;
justify-content: flex-start;
height: 100%;
box-sizing: border-box;
padding-bottom: 10px;
}

.slide.active {
display: flex !important; /* Добавляем !important для преодоления возможных конфликтов стилей */
}

.slide-title {
color: #2e2e2e;
font-size: 1.5em;
margin-bottom: 15px;
text-align: center;
width: 100%;
}

.slide-text {
color: #2e2e2e;
line-height: 1.6;
font-size: 1.2em;
text-align: justify;
flex-grow: 1;
overflow-y: auto;
padding-right: 5px;
word-break: break-word;
width: 100%;
box-sizing: border-box;
}

/* Стилизация полосы прокрутки для .slide-text (опционально) */
.slide-text::-webkit-scrollbar {
width: 8px;
}
.slide-text::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.slide-text::-webkit-scrollbar-thumb {
background: #2b942b;
border-radius: 10px;
}
.slide-text::-webkit-scrollbar-thumb:hover {
background: #2b942b;
}

/* Кнопки навигации слайдера */
.slider-navigation {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 10px; /* Отступ сверху для отделения кнопок от содержимого слайда */
width: 100%; /* Кнопки занимают всю ширину для центрирования */
height: 30px;
}

.slider-navigation button {
background-color: #2b942b; /* Синий, соответствует иконкам summary */
color: white;
border: none;
padding: 10px 10px;
border-radius: 50%;
cursor: pointer;
font-size: 1.1em;
transition: background-color 0.3s ease;
box-shadow: 0 2px 5px rgb(24 23 23);
}

.slider-navigation button:hover {
background-color: #bbe5bb;
}
.slider-navigation button:disabled {
background-color: #ebebeb;
cursor: not-allowed;
}
/* таблица*/
table {
width: 100%;
border-collapse: collapse;
border: 1px solid #d5e6d5;
table-layout: fixed;
word-wrap: break-word;
}
th, td {
border: 1px solid #d5e6d5;
padding: 8px 12px;
text-align: center;
font-weight: 500;
color: #2e2e2e;
font-size: 1em;
vertical-align: middle;
word-break: break-word;
}
th {
background-color: #bbe5bb;
font-weight: 600;
}
/* Стиль для содержимого ячейки: название сверху, картинка снизу */
td .cell-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
}
td .cell-content .caption {
font-weight: 600;
color: #2e2e2e;
font-size: 1em;
white-space: normal;
}
td .cell-content img {
width: 45px;
height: 45px;
object-fit: cover;
border-radius: 6px;
user-select: none;
flex-shrink: 0;
}

/* стиль кнопки копирования*/
button.copy-button {
margin-top: 15px;
margin-left: 10px;
background-color: #ebebeb;
color: #2e2e2e;
border: none;
padding: 8px 18px;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
box-shadow: 0 0 8px #b8b2a8;
transition: background-color 0.3s, color 0.3s;
}
button.copy-button:hover {
background-color: #d5e6d5;
color: #2e2e2e;
}

/* Медиа-запросы для адаптивности */
@media (max-width: 768px) {
.main-container {
padding: 15px;
min-height: auto;
}

.content-wrapper {
padding: 20px;
gap: 20px;
}

.text-block h2 {
font-size: 1.8em;
}

.text-block p {
font-size: 1em;
}

summary {
padding: 15px 20px;
font-size: 1.1em;
}

summary h3 {
font-size: 1em;
}

.dropdown-content {
padding: 15px 20px;
}

/* Адаптив для узких экранов
@media (max-width: 768px) {
.content-wrapper {
padding: 20px;
gap: 20px;
}
summary {
padding: 15px 20px;
font-size: 1.1em;
}
summary h3 {
font-size: 1em;
}
.dropdown-content {
padding: 15px 20px;
}
td .cell-content img {
width: 35px;
height: 35px;
}
} */
/* Адаптивность для слайдера
.slider-block {
height: auto;
min-height: 350px;
padding: 15px;
}
.slide-image {
width: 200px;
height: 160px;
}
.slide-title {
font-size: 1.3em;
}
.slide-text {
font-size: 0.95em;
}
.slider-navigation button {
padding: 8px 15px;
font-size: 1em;
}
}

@media (max-width: 480px) {
body {
padding: 10px;
}
.main-container {
border-radius: 8px; }
.content-wrapper {
padding: 15px;
}
.text-block h2 {
font-size: 1.5em;
}
.text-block p {
font-size: 0.9em;
}
summary {
padding: 12px 15px;
font-size: 1em; }
summary h3 {
font-size: 0.9em;
}
.dropdown-content {
padding: 12px 15px;
} /* Адаптивность для слайдера */
.slider-block {
padding: 10px;
min-height: 300px;
}
.slide-image {
width: 180px;
height: 140px;
}
.slide-title {
font-size: 1.2em;
}
.slide-text {
font-size: 0.9em;
}
.slider-navigation button {
padding: 6px 12px;
font-size: 0.9em;
}
} */
</style>

<div class="main-container">

<div class="content-wrapper">

<div class="text-block">
<h4>Графическое бинго</h4>
<p>Акция с регулярным обновлением! Приглянулась внешка? Смело берите и получайте бонусом плашку и фон на свой вкус!
</p>
</div>

<div class="dropdown-columns-container">
 <details>
<summary>
<h3>Девочки</h3>
</summary>
<div class="dropdown-content">
<p>
<table>
<tr>
<th>Dove Cameron </th>
<th>Taissa Farmiga</th>
<th>Sadie Sink</th>
</tr>
<tr>
<td> </td>
<td></td>
<td></td>
</tr>
</table>
</p>
</div>
</details>

<details>
<summary>
<h3>Мальчики</h3>
</summary>
<div class="dropdown-content">
<p>
<table>
<tr>
<th>Evan Peters</th>
<th>Dominic Sherwood</th>
<th>Cody Fern</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td>
</td>
</tr>
</table>
</p>
</div>
</details>
</div>