.catGoodList__list { padding: 20px 0; } .catGoodList__item { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #cecece; } .catGoodList__item:last-child { border-bottom: none; } .catGoodList__item__foto { width: 30%; -webkit-box-sizing: border-box; box-sizing: border-box; } .catGoodList__item__foto:hover a:before { -webkit-animation: line ease 0.7s; animation: line ease 0.7s; } .catGoodList__item__foto a { position: relative; display: block; overflow: hidden; } .catGoodList__item__foto a:before { display: block; content: ""; width: 25%; height: 100%; background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3)); background: -o-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3)); background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3)); -webkit-transform: skew(-20deg); -ms-transform: skew(-20deg); transform: skew(-20deg); position: absolute; top: 0; left: -50%; } .catGoodList__item__foto img { width: 60%; } .catGoodList__item__content__wrap { width: 70%; max-width: 600px; padding-left: 5%; -webkit-box-sizing: border-box; box-sizing: border-box; } .catGoodList__item__name { margin-bottom: 30px; } .catGoodList__item__name a { font-size: 1rem; text-decoration: none; } .catGoodList__item__sdescr { font-size: 1.25rem; margin-bottom: 30px; } .catGoodList__item__price { font-size: 2rem; margin-bottom: 20px; } .catGoodList__button { font-size: 1.125rem; line-height: 1; border: none; border-radius: 5px; padding: 5px 15px; cursor: pointer; } @-webkit-keyframes line { 0% { left: -50%; } 100% { left: 150%; } } @keyframes line { 0% { left: -50%; } 100% { left: 150%; } } @media screen and (max-width: 768px) { .catGoodList__item__foto { width: 130px; } .catGoodList__item__content__wrap { width: 100%; padding-left: 3%; } .catGoodList__item__name { margin-bottom: 15px; } .catGoodList__item__name a { font-size: 1.25rem; } .catGoodList__item__sdescr { font-size: 1rem; margin-bottom: 15px; } .catGoodList__item__price { font-size: 1.25rem; margin-bottom: 15px; } .catGoodList__button { font-size: 1rem; } } .catGoodList__paginator a { border: 1px solid #dadada; padding: 12px 14px; margin: -19px 11px 21px -7px; display: inline-block; } .catGoodList__paginator b { padding: 12px 14px; margin: -19px 11px 21px -7px; display: inline-block; }