@import url("./site_styles.css");

.zf-index-app h1,
.zf-index-app h2 {
    color: #1B1615;
}

.zf-hero {
    background-color: #f7efe1;
}

.zf-eyebrow {
    color: var(--primary-accent);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.zf-frame-placeholder {
    align-items: center;
    background: linear-gradient(135deg, #eadfce, #c5aa85);
    border: 1rem solid #584424;
    color: #1B1615;
    display: flex;
    font-size: 1.15rem;
    font-weight: 600;
    justify-content: center;
    min-height: 18rem;
    padding: 2rem;
    text-align: center;
}

.zf-hero-image {
    min-height: 24rem;
}

.zf-process-image {
    min-height: 20rem;
}

.zf-production {
    background-color: #fcf8f4;
}

.zf-gallery {
    background-color: #1B1615;
    color: #f7efe1;
    overflow: hidden;
}

.zf-gallery h2 {
    color: #f7efe1;
}

.zf-gallery-window {
    overflow: hidden;
}

.zf-gallery-track {
    animation: zf-gallery-scroll 30s linear infinite;
    display: flex;
    gap: 1.25rem;
    width: max-content;
}

.zf-gallery-card {
    flex: 0 0 22rem;
    min-height: 14rem;
}

.zf-about {
    background-color: #fcf8f4;
}

.zf-cta {
    background-color: #f7efe1;
}

@keyframes zf-gallery-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-33.333% - 1.25rem));
    }
}

@media (max-width: 767px) {
    .zf-frame-placeholder {
        border-width: 0.7rem;
        min-height: 14rem;
    }

    .zf-hero-image {
        min-height: 18rem;
    }
}