.cards-container{ @apply pl-[calc(var(--grid-gutter)*2)] md:pl-[var(--grid-offset)] pr-[calc(var(--grid-gutter)*2)] mb-base overflow-x-clip; @at-root :where(.block-container, .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 aspect-square p-[calc(var(--grid-gutter)*2)] col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-3; p{ @apply text-black; } a{ @apply underline; &:hover{ @apply no-underline; } &[href^="mailto"]{ @apply break-all; } } &__excerpt{ @apply grow; } &__subtitle{ @apply mt-4; } .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-end /*items-start*/; > *:not(.card__icon){ @apply text-size-lg mb-0 w-full; } > a{ @apply no-underline; &[href^="mailto"]{ @apply break-words; } } .card__icon{ @apply shrink-0 ml-3 relative; &::before{ content: ''; background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m22.711 9-6.778-7.32L17.4.32 26.363 10 17.4 19.68l-1.467-1.36L22.71 11H0V9h22.711Z' fill='%23000'/%3E%3C/svg%3E"); background-size: 27px 20px; @apply inline-block w-[27px] h-5 bg-no-repeat bg-contain; } } } &__date{ @apply text-md text-grey-300 mb-xxs; } 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; } } } &:hover{ @apply bg-black text-white; p, span{ @apply text-white; } &:not(.card--y) .card__icon{ &::before{ background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m22.711 9-6.778-7.32L17.4.32 26.363 10 17.4 19.68l-1.467-1.36L22.71 11H0V9h22.711Z' fill='%23FFF'/%3E%3C/svg%3E"); } } } &--columns{ /* aspect-ratio: unset; */ .card__title{ @apply items-start; .card__icon{ @apply mt-2.5; } } > 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; } } &.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{ aspect-ratio: unset; @screen xl{ align-self: inherit; /* aspect-ratio: 2/1; */ aspect-ratio: 2/0.98; } @apply xl:flex-row xl:grid items-start grid-cols-2 col-span-12 lg: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__icon{ &::before{ background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m22.711 9-6.778-7.32L17.4.32 26.363 10 17.4 19.68l-1.467-1.36L22.71 11H0V9h22.711Z' fill='%23FFCC00'/%3E%3C/svg%3E"); } } &.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; } } } &:hover{ @apply text-yellow-100; p, span{ @apply text-yellow-100; } } } &--no-arrow{ @apply items-start; } &--bottom-title{ @apply flex-nowrap; .card__title{ @apply items-end; p{ display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } } .card__icon{ @apply top-[unset] bottom-2.5; } } } .card-grid-item{ @apply items-start; &__header{ @apply grow; } &__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; } } .card__title{ p{ @apply text-md font-bold; } } .card__category, .card__date{ @apply text-sm; } &:hover{ @apply bg-[#0066FF]; } &--has-background{ &.is-hovered{ @apply bg-transparent z-20; p, span{ } .card-grid-item__bg{ @apply opacity-100; } &::after{ content: ''; @apply w-full h-full border border-white absolute left-0 top-0; } } } &--eventi{ @apply bg-black text-white; p{ @apply text-white !important; } } }