.card {

    border-radius: 0.8rem;

    border-width: 1px;

    --tw-border-opacity: 1;

    border-color: rgb(var(--color-white) / var(--tw-border-opacity));

    background-color: rgb(var(--color-white) / 0.3);

    padding: 2.4rem;

    --tw-drop-shadow: drop-shadow(0rem 0rem 6.4rem rgba(23, 28, 58, 0.06));

    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);

    --tw-backdrop-blur: blur(16px);

    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);

            backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.card.card-dark {

    border-width: 1px;

    border-color: rgb(var(--color-blue) / 0.3);

    --tw-bg-opacity: 1;

    background-color: rgb(var(--color-blue) / var(--tw-bg-opacity));

    --tw-text-opacity: 1;

    color: rgb(var(--color-white) / var(--tw-text-opacity));

    --tw-backdrop-blur: blur(0);

    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);

            backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.animate-dark .card.card-dark {

    color: inherit
}

.card.card.card-dark p {

    --tw-text-opacity: 1;

    color: rgb(var(--color-ivory) / var(--tw-text-opacity))
}

.card.card-opaque-border {

    border-color: rgb(var(--color-white) / 0.3)
}

.card strong {

    font-family: var(--font-family-nb-international-pro);

    font-size: var(--font-subtitle-2-m-size);

    line-height: var(--font-subtitle-2-m-line-height, normal);

    letter-spacing: var(--font-subtitle-2-m-letter-spacing, 0);

    font-weight: var(--font-subtitle-2-m-weight, 400)
}

.card strong {

    display: block
}

@media (min-width: 640px) {

    .container {

        max-width: 640px
    }

    .\!container {

        max-width: 640px !important
    }
}

@media (min-width: 768px) {

    .container {

        max-width: 768px
    }

    .\!container {

        max-width: 768px !important
    }
}

@media (min-width: 1024px) {

    .container {

        max-width: 1024px
    }

    .\!container {

        max-width: 1024px !important
    }

    .gap-grid {

        gap: 2.4rem
    }

    .card strong {

        font-size: var(--font-subtitle-2-size);

        line-height: var(--font-subtitle-2-line-height, normal);

        letter-spacing: var(--font-subtitle-2-letter-spacing, 0);

        font-weight: var(--font-subtitle-2-weight, 400)
    }
}

@media (min-width: 1280px) {

    .container {

        max-width: 1280px
    }

    .\!container {

        max-width: 1280px !important
    }
}

@media (min-width: 1536px) {

    .container {

        max-width: 1536px
    }

    .\!container {

        max-width: 1536px !important
    }
}

@media (min-width: 1800px) {

    .container {

        max-width: 1800px
    }

    .\!container {

        max-width: 1800px !important
    }
}