You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

214 lines
4.2 KiB

.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;
}
}
}
}