File: D:/HostingSpaces/SBogers10/ridderstee.komma.pro/wwwroot/css/partials/posts/_postOverview.sass
/* Post overview
========================================================================== */
.post-overview, .relative-posts
.placeholder
display: grid
grid-template-columns: 1fr 1fr 1fr
grid-gap: 100px 20px
margin: auto
width: column(22, 24)
article
position: relative
width: 100%
max-width: 600px
background-color: $lightGray05
text-align: center
a
text-decoration: none
figure
position: relative
width: 100%
overflow: hidden
.image-placeholder
width: 100%
padding-bottom: 66.67%
height: 0
position: relative
span
position: absolute
left: 0
top: 0
width: 100%
height: 100%
transform: scale3d(1,1,1)
transition: transform 0.8s
background:
size: cover
position: center
h3
color: $brown
font-size: 1.3rem
line-height: 1.25
+phenomena
margin: 30px 10px
.date
position: absolute
right: 0
top: -30px
font-size: 0.8rem
line-height: 1.25
color: $lightBlue
.button
margin-bottom: 30px
&:hover
figure
span
transform: scale3d(1.07, 1.07, 1)
+respond-to-width(900)
.placeholder
display: block
width: 100%
article
margin-bottom: 60px
max-width: none
margin-left: auto
margin-right: auto
&:last-of-type
margin-bottom: 0
a
+flex(space-between, flex-start)
figure
width: 40%
.content
width: 60%
text-align: left
padding: 20px 35px
h3
text-align: left
margin: 0 0 10px
.date
position: relative
display: block
top: 0
width: 100%
margin-bottom: 20px
.button
margin-bottom: 0
+respond-to-width(550)
max-width: 400px
a
display: block
figure, .content
width: 100%