/* .card{ @apply relative bg-grey-100 p-4; &--black{ @apply bg-black; p, span{ @apply text-white; } } &__content{ @apply aspect-square flex flex-col justify-between; } .card-header, .card-main{ @apply relative z-10; } .card-header{ @apply flex justify-between text-grey-300; } .card-date{ @apply text-size-sm; } .card-title{ @apply text-size-md font-bold; } .card-bg{ @apply absolute left-0 top-0 w-full h-full scale-125 origin-center opacity-0 pointer-events-none bg-black; img{ @apply w-full h-full object-cover z-10 opacity-75; } } &--has-background{ &.is-hovered{ @apply bg-transparent z-20; p, span{ @apply text-yellow-100; } .card-bg{ @apply opacity-100; } &::after{ content: ''; @apply w-full h-full border border-yellow-100 absolute left-0 top-0; } } } &--has-keyword{ .card-keyword{ font-size: calc(70vw / var(--card-keyword-chars)); @apply absolute top-[50%] left-[50%] translate-y-[-50%] translate-x-[-50%] opacity-0 pointer-events-none text-yellow-100 whitespace-nowrap z-50; } &.is-hovered{ @apply z-20 bg-white; .card-header{ span{ @apply text-grey-300; } } .card-main{ p, span{ @apply text-black; } } .card-keyword{ @apply opacity-100; } &::after{ content: ''; @apply w-full h-full border border-grey-200 absolute left-0 top-0; } } } } */ .cards-container{ @apply grid-container mb-base; @at-root :where(.grid-container) .cards-container{ @apply mx-0 px-0; } &__inner{ @apply grid gap-[calc(var(--grid-gutter)*2)] grid-cols-1 md:grid-cols-2 xl:grid-cols-4; &-squares{ @apply max-xl:lg:grid-cols-3; } } > p{ @apply font-bold mb-4; } } .card{ /* @apply bg-grey-100 xl:grid items-start grid-cols-2 relative; */ @apply bg-grey-100 relative flex items-end aspect-square p-[calc(var(--grid-gutter)*2)]; p{ @apply text-black; } a{ @apply underline; } > p{ @apply text-size-lg mb-0 w-full; + svg{ @apply shrink-0 ml-3 mb-2; } } header{ @apply mb-base xl:mb-0; p{ @apply text-size-md-lg mb-0; &:first-child{ @apply flex justify-between items-start; a{ @apply top-2 relative; } } &:last-child:not(:first-child){ @apply text-size-base; } } } &--columns{ aspect-ratio: unset; > div{ @apply w-full aspect-square; &:first-child{ @apply flex flex-col xl:w-full xl:h-full; header{ @apply grow; } &:last-child{ grid-column: span 2; } } &:last-child:not(:first-child){ @apply hidden lg:flex items-end xl:h-full; p{ @apply mb-0; } } } } &--span{ @screen xl{ align-self: inherit; grid-column: span 2; aspect-ratio: 2/1; } @apply xl:grid items-start grid-cols-2; > div{ @screen xl{ aspect-ratio: unset; } header{ p:first-child{ a{ @apply xl:absolute xl:right-[calc(var(--grid-gutter)*2)] xl:top-7; } } } footer{ /* @apply mb-base xl:mb-0; */ p{ @apply mb-0; } } } } /* &:not(.card--span){ @apply aspect-square; > div{ } } &--columns{ &.card--span{ @apply xl:grid items-start grid-cols-2 p-0; > div{ @apply p-[calc(var(--grid-gutter)*2)]; } } } &--span{ @apply aspect-[2/1]; @apply self-start; @screen xl{ align-self: inherit; grid-column: span 2; } > div{ aspect-ratio: unset; } header{ p:first-child{ a{ @apply xl:absolute xl:right-[calc(var(--grid-gutter)*2)] xl:top-7; } } } footer{ @apply mb-base xl:mb-0; p{ @apply mb-0; } } } */ &--alt{ @apply bg-black text-yellow-100; p{ @apply text-yellow-100; } } &--alt-invert{ @apply bg-yellow-200 text-black; > p{ @apply text-black; } &:hover{ @apply bg-black text-yellow-100; > p{ @apply text-yellow-200; } } } /* &--mono{ @apply flex items-end aspect-square p-[calc(var(--grid-gutter)*2)]; > p{ @apply text-size-lg mb-0 w-full; + svg{ @apply shrink-0 ml-3 mb-2; } } } */ }