.card {
    @apply flex flex-col;

    .info-row {
        @apply text-black-600;
    }

    .text {
        font-family: 'Hind';
    }

    .card-container {
        @apply bg-white border border-solid border-gray shadow-xl;

        &.js--clickable {
            @apply cursor-pointer;
        }

        .card-container-title-top {
            padding: 20px 20px 0 20px;
        }
    }

    .extra-link {
        @apply pt-8;

        .text {
            @apply underline text-red;
        }
    }

    .picture {
        @apply w-auto h-full;

        img {
            @apply w-full h-full;
            object-fit: cover;
        }
    }

    .card-wrapper {
        @apply relative order-1  mb-12;

        .date-block {
            @apply p-4 absolute -bottom-8 right-8 z-10;
        }
    }

    .heading-container {
        display: flex;
        align-items: center;
    }

    .heading-icon {
        margin-left: 16px;

        &.heading-icon-green {
            @apply text-green;
        }
    }

    .title {
        @apply relative mx-8 mb-4 order-2;
    }

    .information {
        @apply flex flex-col mx-8 mb-8 order-3;

        .info-row {
            @apply flex items-center;

            div {
                @apply mr-2 w-5 block;
            }

            .text {
                @apply block;
            }
        }

        .paragraph {
            @apply mt-4;
        }

        .paragraph:first-letter {
            text-transform: capitalize;
        }
    }

    .btn-wrapper {
        @apply relative order-4 mx-8 mb-8;
    }

    .extra-link {
        @apply relative order-5  mx-8 mb-8  text-right;
    }

    &.card-full {
        .card-wrapper {
            @apply order-1;
        }

        .information {
            @apply order-2;
        }

        .btn-wrapper {
            @apply order-4;
        }
    }

    &.card-title-top {
        .card-wrapper {
            @apply order-2;
        }

        .title {
            @apply order-1 mt-4;
        }
    }

    &.card-no-image {
        .card-container {
            .heading {
                @apply mt-8 md:mt-0;
            }
        }

        .card-wrapper {
            @apply mb-4;

            .date-block {
                @apply mt-8 ml-8  relative bottom-auto right-auto;
            }
        }
    }

    &.card-list {
        .card-container {
            .heading {
                @apply mt-8 md:mt-0;
            }
        }

        .card-wrapper {
            @apply mb-4;

            .date-block {
                @apply mt-8 ml-8  relative bottom-auto right-auto;
            }
        }
    }

    &.card-tag {
        .card-wrapper {
            @apply mb-8;
        }

        .tag {
            @apply absolute bottom-8 left-8 text-white bg-black bg-opacity-20;
        }

        .btn-wrapper {
            @apply hidden;
        }
    }

    &.card-cta {
        .card-wrapper {
            @apply order-2 mb-4;
        }

        .title {
            @apply order-1 text-red mt-4;
        }
    }

    &.card-detail,
    &.card-empty {
        .card-container {
            padding: 40px;
        }
        .card-wrapper {
            display: none;
        }

        p {
            margin: 0;
            font-size: 20px;
            line-height: 150%;
        }

        .title {
            @apply text-red;

            font-size: 32px;
            margin: 0 0 20px 0;
        }

        .paragraph {
            margin: 0;
        }

        .information {
            margin: 0;
        }

        .quote-card__container {
            display: flex;
            justify-content: space-between;
        }

        .quote-card {
            min-width: 300px;
            margin-right: -40px;
            margin-left: 10vw;
        }
    }

    &.card-small {
        .card-container {
            @apply shadow-xxs;

            padding: 16px;
        }
        .card-wrapper {
            display: none;
        }

        p {
            margin: 0;
            font-size: 20px;
            line-height: 150%;
        }

        .title {
            @apply text-red;

            order: initial;
            font-size: 16px;
            margin: 0;
        }

        .paragraph {
            margin: 0;
        }

        .information {
            margin: 0;
        }
    }

    &.card-quote {
        @apply flex flex-col;

        .card-wrapper {
            @apply mb-4;
        }

        .name {
            @apply text-red;
        }

        .function {
            @apply text-sm font-bold;
        }

        .place {
            @apply my-2;
        }

        .quote-text {
            @apply relative italic py-6;

            .icon {
                @apply absolute bottom-0 right-0 opacity-10;
            }
        }
    }

    &.card-news {
        .paragraph {
            @apply mt-0;
        }
    }
}