/* arbitrary color */
.bg-\[\#cadbf5\] {
    background-color: #cadbf5;
}

.bg-\[\#cdd0fa\] {
    background-color: #cdd0fa;
}

/* arbitrary max-width */
.max-w-\[50vw\] {
    max-width: 50vw;
}

.space-y-6> :not(:last-child) {
    --tw-space-y-reverse: 0;
    --spacing: 0.25rem;
    margin-block-start: calc(var(--spacing) * 6 * var(--tw-space-y-reverse));
    margin-block-end: calc(var(--spacing) * 6 * (1 - var(--tw-space-y-reverse)));
}

.space-y-24> :not(:last-child) {
    --tw-space-y-reverse: 0;
    --spacing: 0.25rem;
    margin-block-start: calc(var(--spacing) * 24 * var(--tw-space-y-reverse));
    margin-block-end: calc(var(--spacing) * 24 * (1 - var(--tw-space-y-reverse)));
}

.text-transparent {
    color: transparent;
}

.text-vivid-grey {
    color: #5F626B;
}

.text-8xl {
    font-size: 6rem;
    line-height: 1;
}

.py-18 {
    padding-top: calc(0.25rem * 18);
    padding-bottom: calc(0.25rem * 18);
}

.grow {
    flex-grow: 1;
}

.p-10 {
    padding: 2.5rem;
}

.max-w-md {
    max-width: 28rem;
}

.text-7xl {
    font-size: 4.5rem;
    line-height: 1;
}

.text-\[7rem\] {
    font-size: 7rem;
}

.font-sariaCopyExpanded {
    font-family: Saira Expanded, sans-serif;
}

.gap-12 {
    gap: 3rem;
}

.slick-slider button {
    background-color: black;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

#product-slider h2 {
    color: black !important;
    font-weight: 300 !important;
    font-family: 'Saira Expanded', 'sans-serif';
}

#product-slider {
    padding-bottom: 12rem;
}

.slick-slider button>svg {
    color: white;
}


@media (min-width: 1024px) {
    .md\:max-w-3xl {
        max-width: 48rem;
    }
}

@media (min-width: 1280px) {
    .xl\:max-w-4xl {
        max-width: 56rem;
    }
}

@media (min-width: 768px) {
    .md\:max-w-full {
        max-width: 100%;
    }

    .md\:text-8xl {
        font-size: 6rem;
        line-height: 1;
    }

    .md\:text-\[7rem\] {
        font-size: 7rem;
        line-height: 1;
    }


    .md\:max-w-xs {
        max-width: 20rem;
    }

    .md\:py-12 {
        padding-top: 6rem;
        padding-bottom: 6rem;

    }

    .md\:translate-x-\[-1rem\] {
        transform: translateX(-1rem);
    }

    .md\:py-24 {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }

    .md\:inline-block {
        display: inline-block;
    }

    .md\:max-w-5xl {
        max-width: 80rem !important;
    }
}