.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-12; /* &-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 flex-wrap flex-col items-end xl:aspect-square p-[calc(var(--grid-gutter)*2)] col-span-12 md:col-span-6 lg:col-span-3; p{ @apply text-black; + p{ @apply mt-4; } } a{ @apply underline; &:hover{ @apply no-underline; } } &__excerpt{ @apply grow; } .card__category{ @apply grow text-grey-300 w-full text-size-md; } &__img{ @apply grow mb-[calc(var(--grid-gutter)*2)] -mx-[calc(var(--grid-gutter)*2)] -mt-[calc(var(--grid-gutter)*2)]; img{ @apply w-full h-full object-cover; } } &__title{ @apply w-full flex items-start; > *:not(.card__icon){ @apply text-size-lg mb-0 w-full; } > a{ @apply no-underline; } .card__icon{ svg{ @apply shrink-0 ml-3 relative top-2; } } /* &:first-child:last-child{ @apply items-start; > p{ + svg{ @apply mb-0 mt-3; } } } */ } 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 xl:aspect-square; &:first-child{ @apply flex flex-col xl:w-full xl:h-full; header{ @apply grow; } &:last-child{ grid-column: span 2; @apply h-full xl:h-auto; } } &.card__content{ @apply /*hidden lg:flex*/ flex flex-grow xl:flex-grow-0 items-end xl:h-full mt-base xl:mt-0; p{ @screen md{ display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; } @apply mb-0; } } } } &--column-span{ @screen xl{ align-self: inherit; aspect-ratio: 2/1; } @apply xl:flex-row xl:grid items-start grid-cols-2 col-span-12 md:col-span-6; > div{ @screen xl{ aspect-ratio: unset; } .card__icon{ @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-white; p{ @apply text-white; } } &--alt-invert{ @apply bg-white text-black; > p{ @apply text-black; } &:hover{ @apply bg-black text-white; > p{ @apply text-white; } } } &--y{ &.card--alt{ @apply text-yellow-100; p{ @apply text-yellow-100; } } &.card--alt-invert{ @apply bg-yellow-200; &:hover{ @apply text-yellow-100; > p{ @apply text-yellow-200; } } } } }