.list {
    margin: 2rem 0;

    .item{
        padding: 0.5rem 0.75rem;
        border-bottom: 2px solid var(--border-color);
        background-color: var(--bg-alternate-color);
        @include transition() {}

        @include respond-to("medium") {
            &:nth-child(2n) {
                background-color: var(--default-color);
            }
            border: none;
        }

        @include respond-to("medium-up") {
            border-left: 2px solid var(--border-color);

            &:nth-child(4n),
            &:nth-child(4n-1)
            {
                background-color: var(--default-color);
            }

            &:nth-child(4n),
            &:nth-child(4n-1)
            {
                background-color: var(--default-color);
            }

            &:first-child,
            &:nth-child(2) {
                border-top: 2px solid var(--border-color);
            }

            &:nth-child(2n),
            &:last-child {
                border-right: 2px solid var(--border-color);
                margin-right: -2px;
            }
        }

        .title {
            font-size: 1.4rem;
        }

        .grid {
            margin-top: 0.75rem;
        }

        img {
            border: 2px solid var(--font-color);
            max-width: 90%;
        }
    }

    &.hover {
        .item:hover {
            background-color: var(--border-color);
        }
    }
}