:root {
--cta: #3FC1F9;
--recension: #333a3d;
}
ul.topplista {
width: 100%;
margin: auto;
margin-bottom: 30px;
}
ul.topplista li {
border-bottom: thin solid #969696;
padding: 1.25rem 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.product-img {
margin-right: 0.6875rem;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.desc {
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
height: -webkit-min-content;
height: -moz-min-content;
height: min-content;
}
.desc h3 {
margin-bottom: 0.3125rem;
font-size: 0.9375rem;
line-height: 1;
font-weight: bold;
text-transform: uppercase;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
letter-spacing: 0.05rem;
grid-area: label;
}
.desc h4 {
line-height: 3rem;
margin-bottom: 0.3125rem;
margin-top: 0;
font-size: 1.5rem;
grid-area: title;
font-weight: 600;
}
.recension {
margin-top: 0.3125rem;
font-size: 1.1875rem;
line-height: 1.6;
grid-area: recension;
color: var(--recension);
text-decoration-thickness: 0.0625rem;
-webkit-text-decoration-color: var(--recension);
text-decoration-color: var(--recension);
text-underline-offset: 0.25rem;
-webkit-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in;
}
.recension:hover {
color: #000000;
-webkit-text-decoration-color: #000000;
text-decoration-color: #000000;
}
.cta-button {
grid-area: button-right;
height: -webkit-min-content;
height: -moz-min-content;
height: min-content;
width: 100%;
-ms-grid-row-align: center;
align-self: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
justify-items: center;
text-decoration: none;
color: #fff;
font-weight: 600;
letter-spacing: 0.07em;
font-size: 0.79054rem;
line-height: 1;
}
.cta {
background-color: var(--cta);
padding: 0.6rem 1rem;
border-radius: 5px;
text-align: center;
-webkit-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in;
}
.cta:hover {
opacity: 0.85;
}
.cta-button:hover {
color: #ffffff !important;
}
@media (min-width: 64rem) {
.desc {
display: -ms-grid;
display: grid;
grid-auto-rows: -webkit-min-content;
grid-auto-rows: min-content;
-ms-grid-columns: 1fr 13.285rem;
grid-template-columns: 1fr 13.285rem;
grid-template-areas:
'label button-right'
'title button-right'
'recension button-right';
}
.desc h4 {
line-height: 1.2;
}
.desc h3 {
-ms-grid-row: 1;
-ms-grid-column: 1;
}
.desc h4 {
-ms-grid-row: 2;
-ms-grid-column: 1;
}
.recension {
-ms-grid-row: 3;
-ms-grid-column: 1;
}
.cta-button {
-ms-grid-row: 1;
-ms-grid-row-span: 3;
-ms-grid-column: 2;
}
}
@media (min-width: 40.625rem) {
.product-img {
width: 8.375rem;
}
}
@media (min-width: 30rem) {
.product-img {
width: 5.625rem;
}
}
@media (min-width: 20rem) {
.product-img {
width: 5rem;
}
.desc h4 {
line-height: 2rem;
}
.recension {
font-size: 0.875rem;
}
}