/* Общие стили для страницы */
body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin-top: 40px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

/* Общие стили для карточек */
.card {
    width: 250px;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
}

.card img {
    width: 100%;
    border-radius: 6px;
}

/* Стили для ссылок внутри карточек */
.card a {
    text-decoration: none;    /* убираем подчёркивание */
    color: inherit;    /* наследуем цвет текста */
    display: block;    /* ведём ссылка как блок */
}

.card a:hover h2 {
    text-decoration: underline;  /* подчёркивание только заголовка при наведении */
}

/* Skeuomorphism */
.card.skeuomorph {
    background: #eeeeee;
    box-shadow: inset 4px 4px 8px #b8b8b8,
                inset -4px -4px 8px #ffffff;
}

.card.skeuomorph button {
    background: linear-gradient(#f6f6f0, #d0d0d0);
    border: 1px solid #aaa;
    border-radius: 8px;
    padding: 10px 20px;
    box-shadow: 2px 2px 5px #888;
    cursor: pointer;
}

/* Flat Design */
.card.flat {
    background: #3498db;
    color: white;
}

.card.flat button {
    background: #2980b9;
    border: none;
    padding: 10px 20px;
    color: white;
    cursor: pointer;
    border-radius: 4px;
}

/* Material Design */
.card.material {
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: 0.3s;
}

.card.material:hover {
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}

.card.material button {
    background: #6200ea;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    color: white;
    cursor: pointer;
}
img {
    max-height: 400px;
}