.item-card { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 12px; width: 100%; max-width: 100%; margin-right: 0px; margin-left: 0px; margin-top: 0px; margin-bottom: 30px; padding: 5px 0; box-sizing: border-box; overflow: hidden; } .item-image { width: 100%; max-width: 220px; aspect-ratio: 1 / 1; object-fit: cover; display: block; margin: 0 auto; border-radius: 16px; } .item-image-wrap { position: relative; width: 100%; min-width: 0; } .item-content { min-width: 0; width: 100%; box-sizing: border-box; } .item-content p { overflow-wrap: anywhere; } .item-title { margin: 0px 4px 8px; padding: 0; line-height: 1.4; } .item-meta { margin: 4px; padding: 0; line-height: 1.3; } .item-price { margin: 8px 4px; padding: 0; font-size: 20px; } .item-action { margin: 8px 4px 15px; padding: 0; } .item-tags { display: flex; flex-wrap: wrap; gap: 5px 10px; margin: 5px 4px; } .item-tag { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; } .item-tag img { width: 16px; height: 16px; object-fit: contain; } .item-tag a { overflow-wrap: anywhere; } @media (max-width: 600px) { .item-card { grid-template-columns: minmax(0, 38%) minmax(0, 62%); gap: 8px; padding-top: 20px; } .item-image { width: 100%; max-width: none; border-radius: 14px; margin-left: 4px; } .item-title { margin-top: 0px; } .item-price { font-size: 18px; } } @media (max-width: 380px) { .item-card { grid-template-columns: minmax(0, 34%) minmax(0, 66%); gap: 7px; } .item-title { font-size: 14px; } .item-meta { font-size: 12px; } .item-price { font-size: 17px; } }