.hot-review, .broadcast-review { padding: 40px 0; } .broadcast-review .review-box:first-child { grid-row: 1 / 3; } .review-box::after { content: ''; width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; background: linear-gradient( 180deg, rgba(0, 0, 0, 0.05) 0, rgba(0, 0, 0, 0.1) 70%, rgba(0, 0, 0, 0.3) 80%, rgba(0, 0, 0, 0.8) 100% ); } .review-list { display: grid; grid-template-columns: 2fr repeat(2, 1fr); /*grid-auto-rows: 224px;*/ grid-column-gap: 20px; grid-row-gap: 20px; } .review-list .review-box { position: relative; display: block; font-size: 0; } .review-list .review-box img { width: 100%; height: 100%; object-fit: cover; } .review-list .review-box .bottom { position: absolute; bottom: 15px; width: 100%; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; z-index: 2; } .review-list .review-box .bottom p { font-size: 16px; font-weight: 400; color: #ffffff; text-align: justify; line-height: 26px; } .review-list .review-box .bottom span { font-size: 14px; font-weight: 400; color: #ffffff; } .forward-review { padding-bottom: 80px; } .forward-review .review-list { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1024px) { .review-list .review-box .bottom { padding: 0 10px; } } @media (max-width: 768px) { .broadcast-review { padding: 34px 0 40px; } .broadcast-title .more { font-size: 14px; } .review-list, .forward-review .review-list { grid-template-columns: repeat(1, 1fr); } .broadcast-review .review-box:first-child { grid-row: 1; } .review-list .review-box .bottom p { margin-right: 20px; } }