@import '~styles/variables'
@import '~styles-lib/mixins'

$-aspect-ratio = (10 / 16)

.post-card
	rounded-corners-lg()
	elevate-1()
	overflow: hidden
	position: relative
	background-color: var(--theme-bg)
	aspect-ratio: $-aspect-ratio
	// Safari needs this to actually clip our inner content to the border-radius we have assigned.
	transform: translateZ(0)
	cursor: pointer

	.-link
		transition: border-color 200ms ease !important

	&:hover
		elevate-2()

		.-link
			border-color: var(--theme-link)
			// This will immediately show the border and then transition out.
			transition: none !important
