.body{
    display: flex;
    flex-direction: column;
}

.home-flowers-page{
    margin-top: 75px;
    height:max-content;
    width:100%;
    background-color: rgb(195, 175, 159);
}

.home-flowers-content{
    flex: 1;
    padding-top: 1rem;
    display:flex;
    flex-direction: column;
}

.home-flowers-content h1{
    font-family: cursive;
    font-weight: bolder;
    -webkit-text-stroke: .01px rgb(135, 84, 66);
    color: rgb(223, 177, 177);
    text-align: center;
    text-shadow: 1.5px 1.5px 0px rgba(50, 35, 35, 0.691);
    font-size: clamp(1.5rem, 4.5vw, 2.5rem);

    transform: translateY(30px);
    opacity: 0;
    animation: revealUp 1.6s cubic-bezier(.22,1,.36,1) forwards;
    animation-delay: .5s;
    mask-image: linear-gradient(
        to top,
        transparent 0%,
        black 60%
    );
    -webkit-mask-image: linear-gradient(
        to top,
        transparent 0%,
        black 60%
    );

    mask-size: 100% 200%;
    -webkit-mask-size: 100% 200%;

    mask-position: bottom;
    -webkit-mask-position: bottom;
}
.home-flowers-content hr{
    border:none;
    width: clamp(18rem, 58vw, 30rem);
    background-color: rgb(134, 107, 96);
    height:3px;
    align-self: center;
    border-radius: 30px;
    
    transform: translateY(30px);
    opacity: 0;
    animation: revealUp 1.6s cubic-bezier(.22,1,.36,1) forwards;
    animation-delay: .5s;
    mask-image: linear-gradient(
        to top,
        transparent 0%,
        black 60%
    );
    -webkit-mask-image: linear-gradient(
        to top,
        transparent 0%,
        black 60%
    );

    mask-size: 100% 200%;
    -webkit-mask-size: 100% 200%;

    mask-position: bottom;
    -webkit-mask-position: bottom;

}
.home-flowers-grid{
    width:100%;
    padding:2rem;
    display:grid;
    grid-template-columns:  repeat(
        auto-fit,
        minmax(clamp(120px, 22vw, 290px), 1fr)
    );    
    gap: 3rem;
}

.photo-caption{
    display:flex;
    flex-direction: column;
    gap:2px;
}

.photo-caption img{
    border: 2px solid rgb(72, 75, 64);
    border-radius: 4px;

    cursor: pointer;
    transition: transform 0.6s cubic-bezier(.22, 1, .36, 1),
                box-shadow 0.4s ease;
    z-index: 3;
}

#image-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    z-index: 999;
}

#image-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

#image-overlay img {    
    max-width: 80%;
    max-height: 80%;
    transform: scale(0.9);
    transition: transform 0.2s ease;
}

#image-overlay.active img {
    transform: scale(1);
    border: 3px solid rgb(88, 65, 42);
}

.photo-caption p{
    color:rgb(63, 55, 45);
    text-shadow: 1px 1px 0px rgb(174, 163, 163);
    text-align: center;
    position: sticky;
}

.photo-caption {
    opacity: 0;
    transform: translateY(30px);
    transition: transform 2s cubic-bezier(.22,1,.36,1), opacity 1s ease;
    transition-delay: 1s;
}

.photo-caption.show {
    opacity: 1;
    transform: translateY(0);
}