diff options
Diffstat (limited to 'src/components/organisms/project-overview/project-overview.module.scss')
| -rw-r--r-- | src/components/organisms/project-overview/project-overview.module.scss | 28 |
1 files changed, 17 insertions, 11 deletions
diff --git a/src/components/organisms/project-overview/project-overview.module.scss b/src/components/organisms/project-overview/project-overview.module.scss index c9e4edb..98459b7 100644 --- a/src/components/organisms/project-overview/project-overview.module.scss +++ b/src/components/organisms/project-overview/project-overview.module.scss @@ -2,14 +2,19 @@ @use "../../../styles/abstracts/mixins" as mix; .wrapper { - display: flex; - flex-flow: column wrap; - align-items: center; - width: fit-content; - row-gap: var(--spacing-md); + display: grid; + grid-template-columns: minmax(0, 1fr); + gap: clamp(var(--spacing-md), 4vw, var(--spacing-xl)); margin-inline: auto; padding: var(--spacing-md); border: fun.convert-px(1) solid var(--color-border); + + @include mix.media("screen") { + @include mix.dimensions("sm") { + grid-template-columns: minmax(0, fun.convert-px(400)) auto; + align-items: center; + } + } } .heading { @@ -17,24 +22,25 @@ } .cover { - height: fit-content; + justify-self: center; margin: 0; > img { - width: 100%; - max-height: fun.convert-px(250); + max-height: 100%; object-fit: cover; } } .meta { + display: grid; grid-auto-flow: row; - column-gap: clamp(var(--spacing-sm), 1.5vw, var(--spacing-lg)); - row-gap: clamp(var(--spacing-2xs), 1vw, var(--spacing-sm)); + gap: clamp(var(--spacing-2xs), 1vw, var(--spacing-sm)) + clamp(var(--spacing-sm), 1vw, var(--spacing-md)); + width: auto; @include mix.media("screen") { @include mix.dimensions("xs") { - grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-template-columns: repeat(2, minmax(0, 1fr)); } } } |
