.products-product { width: calc(100% / 4); padding: 10px; margin-bottom: 20px; text-align: center; a { width: 100%; text-decoration: none; &:hover { } img { width: 100%; height: 200px; border-radius: 30px; } h1 { font-family: numeralBold; margin-top: 15px; color: #02a1a6; letter-spacing: -1px; text-align: center; margin-bottom: 15px; } } &--physical { background-color: #7fc75d; color: white; padding: 5px 3px; border-radius: 7px; font-family: numeralMedium; text-decoration: none; } } @media screen and (max-width: 350px) { .mobile-products-product { width: 100%; background-color: #fafafa; margin: 20px; border-radius: 0.5rem; box-shadow: 0 3px 8px 0 rgb(0 0 0 / 16%); img { width: 80%; margin: 10px auto; border-radius: 8px; } &__info { width: 80%; margin: 10px auto; h1 { font-family: NumeralLight; color: #4d4d4d; letter-spacing: -1px; } a { width: 48%; padding: 5px 3px; border-radius: 7px; font-family: numeralMedium; text-decoration: none; } &--physical { background-color: #7fc75d; color: white; } &--ar { border: 1px solid #7fc75d; color: #7fc75d; } } &__links { width: 80%; margin: 10px auto; justify-content: space-between; a { width: 48%; padding: 5px 3px; border-radius: 7px; font-family: numeralMedium; text-decoration: none; } &--physical { background-color: #7fc75d; color: white; } &--ar { border: 1px solid #7fc75d; color: #7fc75d; } } } } @media screen and (min-width: 350px) { .mobile-products-product { width: calc(50% - 20px); background-color: #fafafa; margin: 10px; border-radius: 0.5rem; box-shadow: 0 3px 8px 0 rgb(0 0 0 / 16%); img { width: 80%; margin: 10px auto; border-radius: 8px; } &__info { width: 80%; margin: 10px auto; h1 { font-family: NumeralLight; color: #4d4d4d; letter-spacing: -1px; } a { width: 48%; padding: 5px 3px; border-radius: 7px; font-family: numeralMedium; text-decoration: none; } &--physical { background-color: #7fc75d; color: white; } &--ar { border: 1px solid #7fc75d; color: #7fc75d; } } &__links { width: 80%; margin: 10px auto; flex-direction: column; a { width: 100%; padding: 10px 5px; border-radius: 7px; font-family: numeralMedium; text-decoration: none; margin-bottom: 5px; } &--physical { background-color: #7fc75d; color: white; } &--ar { border: 1px solid #7fc75d; color: #7fc75d; } } } } @media screen and (min-width: 550px) { .mobile-products-product { width: calc(33% - 20px); background-color: #fafafa; margin: 10px; border-radius: 0.5rem; box-shadow: 0 3px 8px 0 rgb(0 0 0 / 16%); img { width: 80%; margin: 10px auto; border-radius: 8px; } &__info { width: 80%; margin: 10px auto; h1 { font-family: NumeralLight; color: #4d4d4d; letter-spacing: -1px; } a { width: 48%; padding: 5px 3px; border-radius: 7px; font-family: numeralMedium; text-decoration: none; } &--physical { background-color: #7fc75d; color: white; } &--ar { border: 1px solid #7fc75d; color: #7fc75d; } } &__links { width: 80%; margin: 10px auto; flex-direction: column; a { width: 100%; padding: 10px 5px; border-radius: 7px; font-family: numeralMedium; text-decoration: none; margin-bottom: 5px; } &--physical { background-color: #7fc75d; color: white; } &--ar { border: 1px solid #7fc75d; color: #7fc75d; } } } }