feat: image styling
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
.main {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, auto);
|
||||
grid-template-columns: repeat(3, minmax(min-content, max-content));
|
||||
padding: var(--Spacing-x4) var(--Spacing-x4) 0 var(--Spacing-x4);
|
||||
height: 100dvh;
|
||||
background-color: var(--Scandic-Brand-Warm-White);
|
||||
|
||||
@@ -3,12 +3,13 @@
|
||||
background-color: var(--Base-Surface-Primary-light-Normal);
|
||||
border: 1px solid var(--Base-Border-Subtle);
|
||||
border-radius: var(--Corner-radius-Small);
|
||||
min-height: 460px;
|
||||
max-height: 460px;
|
||||
width: 480px;
|
||||
}
|
||||
|
||||
.image {
|
||||
height: auto;
|
||||
min-height: 160px;
|
||||
max-height: 180px;
|
||||
object-fit: cover;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
@@ -53,13 +54,11 @@
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 850px) {
|
||||
@media screen and (min-width: 1180px) {
|
||||
.card {
|
||||
grid-template-columns: 1fr min(480px);
|
||||
height: 285px;
|
||||
min-height: 285px;
|
||||
width: 850px;
|
||||
max-width: 850px;
|
||||
}
|
||||
|
||||
.image {
|
||||
|
||||
Reference in New Issue
Block a user