@charset "UTF-8";

main {
    min-width: 350px;
    padding-bottom: 20px;
    .emoji_list {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 20px;
        margin: 20px 20px 20px 0;

        li {
            background-color: #fff;
            border: 1px solid #fff;
            transition: border 0.2s;

            &:hover {
                border: 1px solid #999;
            }

            a {
                display: flex;
            justify-content: center;
            align-items: center;
                width: 100%;
                aspect-ratio: 1/1;
                padding: 10%;
                transition: padding 0.2s;

                &:hover {
                    padding: 12%;
                }

                img {
                    max-width: 100%;
                    max-height: 100%;
                    display: block;
                    object-fit: cover;
                }
            }
        }
    }

    .main-inner {
        margin-top: 20px;
        padding-right: 20px;
    }

}

@media (max-width: 900px) {
    main {
        border-bottom: 1px solid #333;

        .emoji_list {
            margin: 20px 20px 0 20px;

        }

        .main-inner {
            padding: 0 20px;
        }
    } 
}