.container {
    padding: 0px 9%;
    max-width: 1367px;
    margin: 0 auto;
}

.tab {
    border-bottom: 1px solid;
    border-bottom-color: rgb(203 201 201);
    line-height: 3rem;
    span {
        line-height: 2rem;
        font-weight: bolder;
        font-size: 1.2rem;
    }
}
.tag-group {
    margin: 11px 4px;
    display: flex;
    gap: 10px;
    .tag {
        border: 1px solid #b1b0b0;
        border-radius: 14px;
        padding: 12px 16px;
        font-size: .8rem;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .tag:hover {
        border: 1px solid #000000;
        background-color: #f3ebd6;
    }
}

.content {
    margin: 18px auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    .item {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding-bottom: 30px;
        border: 1px solid #f7f4ed;
        align-items: center;
        justify-content: space-between;
        a {
            width: 100%;
            img {
                width: 100%;
                max-height: 456px;
            }
        }
        .model-name {
            text-align: center;
        }
    }
    .item:hover {
        border: 1px solid #efe9d9;
        box-shadow: 0 0 12px 0 rgba(0, 0, 0, .12);
        border-radius: 6px;
        overflow: hidden;
    }
}

@media (max-width: 1320px) {
    .tag-group {
        .tag {
            padding: 12px 6px;
        }
    }
}