@font-face {
    font-family: 'Open Sans';
    src: url('/wow_book/fonts/OpenSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'Open Sans', Arial, sans-serif; /* Используем Open Sans как основной шрифт */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.dropdown-panel {
    display: block;
    margin: 5px;
    width: 100%;
}

.dropdown-button {
    width: 100%;
    padding: 10px;
    font-size: 2.5rem; /* Увеличенный размер шрифта для кнопки */
    font-weight: bold;
    color: white;
    background: linear-gradient(115deg, rgb(0, 157, 149) 0%, rgb(0, 150, 185) 50%, rgb(101, 115, 181) 100%);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    transition: box-shadow 0.3s, background-color 0.3s, color 0.3s;
    height: 80px; /* Увеличена высота кнопки */
}

.dropdown-button:hover {
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
}

.dropdown-list {
    background-color: #f9f9f9;
    width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-top: 5px;
    border-radius: 5px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.7s ease, opacity 0.7s ease;
    padding: 0; /* Убираем отступы для скрытого списка */
}

.dropdown-list.visible {
    max-height: none;
    opacity: 1;
    padding: 10px; /* Добавляем отступы при открытии */
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Адаптивная сетка */
    gap: 20px;
}

.team-member {
    text-align: center;
}

.member-photo img {
    width: 100%; /* Адаптивная ширина */
    height: auto; /* Автоматическая высота для сохранения пропорций */
    max-width: 360px; /* Ограничиваем максимальную ширину */
    object-fit: cover;
    margin-bottom: 10px;
}

.member-name {
    margin: 0;
    font-size: 1.9rem; /* Увеличенный размер шрифта для имени участника */
    font-weight: bold; /* Жирный шрифт для имени участника */
}

.member-role {
    font-size: 1.7rem; /* Увеличенный размер шрифта для роли участника */
    color: #666;
}

@media (max-width: 600px) {
    .dropdown-button {
        font-size: 2rem; /* Увеличенный размер шрифта для маленьких экранов */
    }

    .member-name {
        font-size: 1.2rem; /* Увеличенный размер шрифта для имени на маленьких экранах */
    }

    .member-role {
        font-size: 1rem; /* Увеличенный размер шрифта для роли на маленьких экранах */
    }
}