.card-1-home {
    @apply flex flex-col gap-3 h-full;
    flex: 1;

    .card-header {
        @apply flex items-end justify-start lg:justify-between gap-5 pb-3 border-b-3 border-primary;

        .card-icon {
            @apply flex border-3 border-transparent items-center justify-center bg-light-dark text-primary rounded-full cursor-pointer transition
            hover:bg-light-dark/50 hover:border-primary;
            min-width: 64px;
            min-height: 64px;
            width: 64px;
            height: 64px;

            @media(max-width: 575px) {
                min-width: 40px;
                min-height: 40px;
                width: 40px;
                height: 40px;
            }
            animation: pulse-border 1.5s ease-in-out infinite;

            i {
                width: 32px;
                height: 32px;
            }

            &:hover {
                animation: none;
            }
        }

        .card-title {
            @apply font-sora;
            line-height: 100%;
        }
    }

    .card-body {
        @apply flex flex-col h-full text-justify font-inter font-regular opacity-0 origin-top transition;
        font-size: 16px;
    }

    &.active {
        .card-icon {
            @apply bg-primary text-light hover:bg-primary/90;
        }

        .card-body {
            @apply opacity-100;
        }
    }
}

.card-2-home {
    @apply flex flex-col gap-3 bg-light-dark rounded-2xl p-6;
    line-height: 24px;
    flex: 1;

    .card-title {
        @apply font-sora font-regular text-black;
        font-size: 18px;
    }

    .card-body {
        @apply font-regular;
    }

    .card-footer {
        .card-footer-name {
            @apply text-primary font-semibold font-title;
        }
    }
}

.card-3 {
    @apply bg-light-dark rounded-3xl p-3 flex flex-col items-center sm:grid grid-cols-2;

    .card-title {
        font-size: 22px;
    }

    .card-subtitle {
        font-size: 18px;
    }

    .card-image {
        @apply rounded-3xl;

        width: 263px;
        height: 225px;

        object-fit: cover;
        object-position: top;
    }
}

.card-4 {
    @apply bg-light-dark rounded-3xl p-1 md:p-5 flex flex-col md:grid grid-cols-2;

    .card-body {
        @apply p-4;

        .card-content {
            @apply border-l-0 md:border-l-3 border-primary text-justify;
        }
    }

    .card-image {
        @apply rounded-3xl;

        object-fit: cover;
        object-position: top;
        aspect-ratio: 16/9;
    }
}


@keyframes pulse-border {
    0%, 100% {
        border-color: transparent;
    }
    50% {
        border-color: theme('colors.primary');
    }
}