.creatures{
    .lead {
        margin: 0 0 30px 0;
        font-size: 20px;
        color: var(--brand-color);
        font-weight: 600;
        line-height: 1.2;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .lead::before,
    .lead::after {
        content: "";
        height: 4px;
        width: 30px;
        background-color: var(--brand-color);
        border-radius: 5px;
    }
    .lead::before {
        margin: 0 10px 0 0;
        transform: rotate(60deg);
    }
    .lead::after {
        margin: 0 0 0 10px;
        transform: rotate(-60deg);
    }
    .creatures_tabs{
        margin: 0 0 20px 0;
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        justify-content: center;
        gap: 10px 10px;
    }
    .creatures_tab {
        padding: 5px 10px;
        color: var(--color-gray);
        font-size: 15px;
        line-height: 1.2;
        border: solid 1px var(--color-gray);
        border-radius: 50vh;
        transition: color 0.3s ease, opacity 0.3s ease;
    }
    .creatures_tab:hover {
        color: var(--color-gray-dark);
    }
    .creatures_tab.is-active {
        color: var(--color-white);
        border-color: var(--brand-color);
        background: var(--brand-color);
    }
    .creatures_list{
        margin: 0 0 30px 0;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 30px 20px;
    }
    .creatures_list.is-empty{
        display: none;
    }
    .creatures_item{
        position: relative;
        z-index: 99;
    }
    figure{
        width: 100%;
        aspect-ratio: 4 / 3;
        background: var(--color-gray-light);
        overflow: hidden;
    }
    figure img{
        width: 100%;
        height: 100%;
        display: block;
        object-fit: contain;
    }
    .name{
        min-height: 60px;
        padding: 10px 20px;
        font-family: var(--font-zenmaru);
        font-size: 16px;
        font-weight: 700;
        background: var(--color-white);
    }
    .button-more{
        width: 250px;
        margin: 0 auto;
        padding: 15px 0;
        color: var(--color-white);
        font-weight: 500;
        text-align: center;
        line-height: 1;
        border: solid 2px var(--brand-color);
        border-radius: 50vh;
        background: var(--brand-color);
        display: block;
        transition:
        color 0.25s ease,
        background 0.25s ease;
    }

    .button-more:hover{
        color: var(--brand-color);
        background: var(--color-white);
    }
}

@media screen and (max-width: 1024px) {
    .creatures{
        .creatures_tabs{
            grid-template-columns: repeat(4, minmax(0, 200px));
        }
        .creatures_list{
            grid-template-columns: repeat(3, 1fr);
        }
    }
}

@media screen and (max-width: 800px) {
    .creatures{
        .creatures_list{
            grid-template-columns: repeat(2, minmax(0, 300px));
            justify-content: center;
        }
    }
}

@media screen and (max-width: 600px) {
    .creatures{
        .lead{
            font-size: 16px;
        }
        .creatures_tabs{
            gap: 10px 5px;
        }
        .creatures_tab{
            padding-left: 8px;
            padding-right: 8px;
            font-size: 10px;
        }
        .creatures_list{
            grid-template-columns: repeat(1, 1fr);
            gap: 20px;
        }
        .creatures_item{
            display: flex;
        }
        figure{
            width: 140px;
            margin-bottom: 0;
            flex-shrink: 0;
        }
        .name{
            width: 100%;
            font-size: 14px;
        }
    }
}