/* Custom styles to extend Tailwind */
body {
    font-family: 'Lato', sans-serif;
    background-color: #fdfdfd;
    color: #333;
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-serif {
    font-family: 'Lora', serif;
}

.modal {
    transition: opacity 0.25s ease;
}

.modal-content {
    transition: transform 0.25s ease;
}

.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Styles for the Gallery Wall */

.gallery-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background-color: #f3f4f6;
    /* bg-gray-100 */
    margin-bottom: 1rem;
    /* mb-4 */
    break-inside: avoid;
    /* break-inside-avoid */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.gallery-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: black;
    opacity: 0;
    transition: opacity 400ms;
}

.gallery-item:hover {
    transform: scale(1.03);
}

.gallery-item:hover::after {
    opacity: 0.2;
}

.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
}