scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: image styling

Browse Source
This commit is contained in:
Fredrik Thorsson
2024-08-06 13:06:51 +02:00
parent 75011dffe5
commit ca7c50659e
2 changed files with 5 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.module.css
View File

@@ -1,6 +1,6 @@
.main { .main {
display: grid; 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); padding: var(--Spacing-x4) var(--Spacing-x4) 0 var(--Spacing-x4);
height: 100dvh; height: 100dvh;
background-color: var(--Scandic-Brand-Warm-White); background-color: var(--Scandic-Brand-Warm-White);

9
components/HotelReservation/HotelCard/hotelCard.module.css
View File

@@ -3,12 +3,13 @@
background-color: var(--Base-Surface-Primary-light-Normal); background-color: var(--Base-Surface-Primary-light-Normal);
border: 1px solid var(--Base-Border-Subtle); border: 1px solid var(--Base-Border-Subtle);
border-radius: var(--Corner-radius-Small); border-radius: var(--Corner-radius-Small);
min-height: 460px; max-height: 460px;
width: 480px;
} }
.image { .image {
height: auto; height: auto;
min-height: 160px; max-height: 180px;
object-fit: cover; object-fit: cover;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
@@ -53,13 +54,11 @@
justify-content: center; justify-content: center;
} }
@media screen and (min-width: 850px) { @media screen and (min-width: 1180px) {
.card { .card {
grid-template-columns: 1fr min(480px); grid-template-columns: 1fr min(480px);
height: 285px; height: 285px;
min-height: 285px;
width: 850px; width: 850px;
max-width: 850px;
} }
.image { .image {