.cards-container{
@apply mb-base overflow-x-clip;
&__inner, > p{
width: calc(100% - (var(--grid-gutter)*4));
margin-left: auto;
margin-right: auto;
@screen md{
width: calc(100vw - var(--grid-offset) - var(--grid-gutter)*2);
margin-left: var(--grid-offset);
}
@screen 2xl{
max-width: theme(screens.2xl);
margin-left: max(var(--grid-offset), calc((100vw - theme(screens.2xl))/2))
}
@at-root :where(.block-container, .grid-container) .cards-container .cards-container__inner{
@apply mx-0 px-0;
}
@at-root :where(.block-container, .grid-container) .cards-container > p{
@apply mx-0 px-0;
}
}
&__inner{
@apply grid gap-[calc(var(--grid-gutter)*2)] grid-cols-12;
> p {
grid-column: span 12;
@apply mb-0;
}
}
> 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;
@media screen and (min-width: 80rem) and (max-width: 90rem){
hyphens:auto;
hyphenate-limit-chars: 6;
}
}
&__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{
/* @media screen and (min-width: 80rem) and (max-width: 90rem){
hyphens:auto;
hyphenate-limit-chars: 6;
} */
@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, > *:has(> .card__icon){
@apply shrink-0 ml-3 w-auto;
}
> *:has(> .card__icon){
@apply flex items-start shrink-0 ml-3 w-auto;
.card__icon{
@apply mt-0.5 !important;
}
}
.card__icon{
@apply relative;
}
}
&__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;
}
}
&--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, > *:has(> .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;
}
}
}
&: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 arrows **/
.card{
.card__icon{
&::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;
}
&[href]:not(:where(
/* exclude hash only links */
[href^="#"],
/* exclude relative but not double slash only links */
[href^="/"]:not([href^="//"]),
)){
&::before{
background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m16.204 2.382-9.97-.383L6.311 0l13.182.507L20 13.689l-1.999.077-.383-9.97-16.06 16.06L.146 18.44 16.204 2.382Z' fill='%23000'/%3E%3C/svg%3E");
}
}
}
&:hover{
.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");
}
&[href]:not(:where(
/* exclude hash only links */
[href^="#"],
/* exclude relative but not double slash only links */
[href^="/"]:not([href^="//"]),
)){
&::before{
background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m16.204 2.382-9.97-.383L6.311 0l13.182.507L20 13.689l-1.999.077-.383-9.97-16.06 16.06L.146 18.44 16.204 2.382Z' fill='%23fff'/%3E%3C/svg%3E");
}
}
}
}
&--alt{
.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");
}
&[href]:not(:where(
/* exclude hash only links */
[href^="#"],
/* exclude relative but not double slash only links */
[href^="/"]:not([href^="//"]),
)){
&::before{
background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m16.204 2.382-9.97-.383L6.311 0l13.182.507L20 13.689l-1.999.077-.383-9.97-16.06 16.06L.146 18.44 16.204 2.382Z' fill='%23fff'/%3E%3C/svg%3E");
}
}
}
&:hover{
.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");
}
&[href]:not(:where(
/* exclude hash only links */
[href^="#"],
/* exclude relative but not double slash only links */
[href^="/"]:not([href^="//"]),
)){
&::before{
background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m16.204 2.382-9.97-.383L6.311 0l13.182.507L20 13.689l-1.999.077-.383-9.97-16.06 16.06L.146 18.44 16.204 2.382Z' fill='%23fff'/%3E%3C/svg%3E");
}
}
}
}
}
&--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");
}
&[href]:not(:where(
/* exclude hash only links */
[href^="#"],
/* exclude relative but not double slash only links */
[href^="/"]:not([href^="//"]),
)){
&::before{
background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m16.204 2.382-9.97-.383L6.311 0l13.182.507L20 13.689l-1.999.077-.383-9.97-16.06 16.06L.146 18.44 16.204 2.382Z' fill='%23FC0'/%3E%3C/svg%3E");
}
}
}
&:hover{
.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");
}
&[href]:not(:where(
/* exclude hash only links */
[href^="#"],
/* exclude relative but not double slash only links */
[href^="/"]:not([href^="//"]),
)){
&::before{
background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m16.204 2.382-9.97-.383L6.311 0l13.182.507L20 13.689l-1.999.077-.383-9.97-16.06 16.06L.146 18.44 16.204 2.382Z' fill='%23FC0'/%3E%3C/svg%3E");
}
}
}
}
}
}
.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;
}
}
&--page{
@apply bg-black text-white;
p{
@apply text-white !important;
}
.card__title{
p{
@apply text-size-lg font-normal;
}
}
}
}
