add items-large

assets/sass/components/_place.sass

@@ -1,12 +1,15 @@
 .place
+    --bs-card-spacer-x: 0
     --bs-card-border-width: 0
     --bs-card-border-radius: 0
     --bs-card-inner-border-radius: 0
     --bs-card-bg: transparent
     --bs-card-cap-bg: transparent
     --bs-card-cap-padding-x: 0
-    --bs-card-cap-padding-y: 0
     @extend .card
+    .description
+        color: $text-muted
+        font-size: $small-font-size
     .media
         --bs-aspect-ratio: 66%
         img
@@ -17,8 +20,6 @@
         color: $text-muted
         font-size: $small-font-size
         margin-bottom: $paragraph-margin-bottom
-    .name
-        font-size: $h3-font-size
     .btn
         @extend .btn-link
         @extend .btn-sm
@@ -29,18 +30,28 @@
                 font-size: 1rem
                 margin-left: .2rem
                 transition: transform $transition-duration $transition-effect
+
+    .places-large &
+        .name
+            font-size: $h3-font-size
+
 
     @media (prefers-reduced-motion: no-preference)
         a:hover .btn::after
             transform: translateX(.5rem)
 
 
     @include media-breakpoint-up(lg)
-        align-items: center
-        flex-direction: row
-        .content,
-        .media
-            flex: 1
+        .places-large &
+            align-items: center
+            flex-direction: row
+            .content,
+            .media
+                flex-basis: 50%
+            .media
+                margin-right: calc(#{$grid-gutter-width} / 2)
+            .content
+                margin-left: calc(#{$grid-gutter-width} / 2)
 
     @include media-breakpoint-down(lg)
         --bs-card-spacer-x: 0

assets/sass/components/_places.sass

@@ -1,11 +1,15 @@
 .places
     --bs-gutter-y: calc(#{$global-spacing} / 2)
     @extend .row 
+    @extend .row-cols-1
+    @extend .row-cols-md-3
+    @extend .row-cols-lg-4
     @include media-breakpoint-up(md)
         --bs-gutter-y: #{$global-spacing}
-    > *
-        @extend .col-md-10
-        &:nth-child(even)
-            @extend .offset-md-2
+    &-large
+        > div
+            @extend .col-md-10
+            &:nth-child(even)
+                @extend .offset-md-2
     & + nav
         @include margin-top($global-spacing)

config.yml

@@ -12,7 +12,8 @@ module:
 params:
   places:
     thumbnail:
-      desktop: '522x345'
+      desktop: '306x202'
+      desktop_large: '526x347'
       mobile: '300x198'
       scrollsnap: '240x158'
     image:

layouts/partials/places/item-large.html

@@ -0,0 +1,4 @@
+<article class="place" itemscope itemtype="http://schema.org/Place"{{ partial "func/SetAnim" (dict "element" "item") }}>
+  {{ partial "places/item/content-large" . }}
+  {{ partial "places/item/media-large" . }}
+</article>

layouts/partials/places/item/content-large.html

@@ -0,0 +1,6 @@
+<a href="{{ .Permalink }}" itemprop="url" class="content">
+  {{ partial "places/item/title" . }}
+  {{ partial "places/item/description" . }}
+  {{ partial "places/item/address" . }}
+  {{ partialCached "commons/item/more" . }}
+</a>

layouts/partials/places/item/content.html

@@ -1,5 +1,4 @@
 <a href="{{ .Permalink }}" itemprop="url" class="content">
   {{ partial "places/item/title" . }}
-  {{ partial "places/item/address" . }}
-  {{ partialCached "commons/item/more" . }}
+  {{ partial "places/item/description" . }}
 </a>

layouts/partials/places/item/media-large.html

@@ -0,0 +1,10 @@
+{{- $desktop := site.Params.places.thumbnail.desktop_large | default false -}}
+{{- $mobile := site.Params.places.thumbnail.mobile | default false -}}
+{{ if .Scratch.Get "scrollsnap" }}
+  {{- $mobile = site.Params.places.thumbnail.scrollsnap | default false -}}
+{{ end }}
+{{ partial "commons/item/media.html" (dict
+      "context" .
+      "desktop" $desktop
+      "mobile" $mobile
+    ) }}

layouts/partials/places/items-large.html

@@ -0,0 +1,5 @@
+{{ $dict := . }}
+{{ if reflect.IsMap . }}
+  {{ $dict = (dict "pages" .pages "large" true "abovethefold" .abovethefold "scrollsnap" .scrollsnap) }}
+{{ end }}
+{{ partial "commons/items" $dict }}