diff --git a/resources/css/blocks/labelled-picture.css b/resources/css/blocks/labelled-picture.css index 7ddbcbf..23bfb76 100644 --- a/resources/css/blocks/labelled-picture.css +++ b/resources/css/blocks/labelled-picture.css @@ -2,9 +2,32 @@ @apply relative w-full; img { @apply rounded-lg w-full object-cover; - max-height: 300px; } figcaption { - @apply bg-white absolute px-8 py-2 text-center bottom-4 left-4 z-10 rounded-lg font-bold text-base; + @apply px-1 py-2 font-bold text-base; + } + + &--fixed-height { + img { + max-height: 300px; + } + } + + &--legend-sticky { + figcaption { + @apply absolute left-0 bottom-4 left-4 z-10 rounded-lg bg-white text-center w-fit px-8; + } + } + + &--legend-has-title { + figcaption { + @apply font-normal; + .figcaption-title { + @apply font-bold; + &:after { + content: ' :'; + } + } + } } }