123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123 |
- @import "styles/_variables.scss";
- .card {
- width: calc(100% / 6);
- padding: 0.5rem;
- .content {
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- width: 100%;
- height: 100%;
- border: 1px solid rgba($color: $dark-gray, $alpha: 0.1);
- border-radius: $border-radius;
- transition: all 0.5s;
- .img {
- width: 100%;
- height: 155px;
- padding: 10px;
- > img {
- width: 100%;
- height: 100%;
- object-fit: contain;
- object-position: center;
- transition: all 0.5s;
- }
- }
- .info {
- .title {
- padding: 10px;
- border-top: 1px solid rgba($color: $dark-gray, $alpha: 0.1);
- h3 {
- font-weight: 500;
- font-size: 0.9rem;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 1;
- overflow: hidden;
- }
- }
- .footer {
- display: flex;
- align-items: center;
- padding: 10px;
- .price {
- flex: 1;
- display: flex;
- flex-direction: row;
- align-items: baseline;
- font-weight: 500;
- small {
- margin-left: 5px;
- }
- }
- .btn {
- width: auto;
- }
- }
- }
- &:hover {
- > .img {
- > img {
- transition: all 0.5s;
- transform: scale(1.05);
- }
- }
- transition: all 0.5s;
- border-color: $dark-gray;
- }
- }
- }
- @media (max-width: 1366px) {
- .card {
- width: calc(100% / 4);
- }
- }
- @media (max-width: 1200px) {
- .card {
- width: calc(100% / 3);
- }
- }
- @media (max-width: 900px) {
- .card {
- width: calc(100% / 2);
- }
- }
- @media (max-width: 768px) {
- .card {
- .content {
- .footer {
- flex-direction: column;
- .btn {
- min-width: 100%;
- margin-top: 10px;
- & > * {
- width: 100%;
- }
- }
- }
- }
- }
- }
- @media (max-width: 450px) {
- .card {
- width: 100%;
- }
- }
|