.section.blog { main > section { padding-left: 0; padding-right: 0; margin: 2rem var(--container-margin); } .blogs { display: grid; grid-gap: var(--space-4); a { text-decoration: none; padding: var(--space-4); border-radius: var(--space-3); min-height: 25vw; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; grid-gap: var(--space-4); color: inherit; border: thin solid var(--darken-1); box-shadow: var(--space-1) var(--space-1) var(--space-2) var(--darken-2); transition: box-shadow var(--animation); .img { display: inline-block; background-position: center center; background-size: cover; --size: 6rem; height: var(--size); width: var(--size); border-radius: var(--space-2); } .info { justify-content: center; .reading { align-self: flex-end; &::after { content: ' min.'; } } .date { align-self: flex-start; } } p { grid-column: 1 / -1; } &:hover, &:focus { box-shadow: var(--space-2) var(--space-2) var(--space-2) var(--darken-3); } } } }