/*
    EXAMPLE

*/



main::before { content: ''; display: block; width: 100%; height: 6rem; background-color: transparent; }




/*  STORY   */
article.lists { margin: 0 auto; width: var(--width); opacity: 0; }
article.lists.show { animation: show-up 0.5s ease 1 forwards; }
article.lists section { margin: 0 auto 3rem; width: 100%; }
article.lists section a { display: block; margin: 0 auto 0.5rem; width: 100%; height: 20rem; background: no-repeat 50% 50% / cover; }
article.lists section h3 { display: block; width: 100%; height: 2rem; font-size: 1rem; font-variation-settings: 'wght' 500; color: var(--color-black); letter-spacing: -1px; line-height: 2rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
article.lists section h4 { display: flex; justify-content: space-between; align-items: center; width: 100%; font-size: 0.8rem; font-variation-settings: 'wght' 400; color: var(--color-gray); }

@keyframes show-up {
    0%      { opacity: 0; transform: translateY(5rem); }
    100%    { opacity: 1; transform: translateY(0); }
}






/*  PC VERSION  */
@media (min-width: 800px) {
    main { display: flex; flex-wrap: wrap; justify-content: space-between; align-content: flex-start; }

    /*  STORY   */
    article.lists { display: flex; flex-wrap: wrap; justify-content: space-between; align-content: flex-start; width: 100%; }
    article.lists section { margin: 0 auto 3rem; width: 48%; }
    article.lists section a { width: 100%; height: 25rem; }
}