.column_archive {
    .inner {
        padding-inline: 40px;

        @media (max-width: 780px) {
            padding-inline: 16px;
        }

        .list {
            margin-top: 144px;
            margin-bottom: 80px;
            margin-inline: auto;
            max-width: 1200px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 80px 60px;

            @media (max-width: 1000px) {
                margin-top: 80px;
                margin-bottom: 64px;
                grid-template-columns: repeat(2, 1fr);
                gap: 48px 32px;
            }

            @media (max-width: 780px) {
                margin-top: 64px;
                margin-bottom: 48px;
                grid-template-columns: repeat(1, 1fr);
                gap: 24px;
            }

            li {
                display: flex;

                .card {
                    display: flex;
                    flex-direction: column;
                    width: 100%;

                    .image {
                        overflow: hidden;

                        img {
                            width: 100%;
                            height: 100%;
                            aspect-ratio: 3 / 2;
                            object-fit: cover;

                            /* transition: transform .4s ease; */
                        }
                    }

                    /* @media (hover: hover) {
          &:hover {
            .image {
              img {
                transform: scale(1.05);
              }
            }
          }
        } */

                    .ttl {
                        margin-top: 24px;
                        flex-grow: 1;
                        font-size: 18px;
                        font-weight: 700;
                        line-height: 1.5;
                        color: var(--color-text-1);

                        @media (max-width: 780px) {
                            margin-top: 16px;
                            font-size: 16px;
                        }
                    }

                    .text {
                        margin-top: 16px;
                        font-size: 14px;
                        line-height: 2.5;
                        color: var(--color-black);

                        @media (max-width: 780px) {
                            margin-top: 8px;
                            line-height: 1.75;
                        }
                    }
                }
            }
        }
    }
}