.section-separator {
    height: 10vh;
}

.section-photos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5vw;
    padding: 5vw;
}

.section-photo a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
}

.section-photo a:hover {
    color: rgba(255, 255, 255, 1);
    text-decoration: none;
}

.section-photo {
    min-height: 20vh;
    background-color: rgb(199, 199, 199);
    border-top: 1rem solid white;
    border-bottom: 3rem solid white;
    border-left: 1rem solid white;
    border-right: 1rem solid white;
    font-size: 2rem;
    padding: 2rem;
    padding-bottom: calc(2rem + 2rem);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    font-family: 'Katibeh', cursive;
}

.section-preface {
    padding-left: 10vw;
    padding-right: 10vw;
}

.section-preface-content {
    padding: 5vw;
    font-size: 3rem;
    text-align: center;
    font-family: 'Katibeh', cursive;
}

.section-1-primary, .section-2-primary, .section-3-primary, .section-4-primary {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}


.section-1-primary {
    background: url("/assets/media/global/theme-1.png"), var(--section-1-main);
}

.section-1-secondary {
    background-color: var(--section-1-secondary);
}

.section-1-tertiary {
    background-color: var(--section-1-tertiary);
}

.section-1-text {
    color: var(--section-1-accent);
}

.section-2-primary {
    background: url("/assets/media/global/theme-2.png"), var(--section-2-main);
}

.section-2-secondary {
    background-color: var(--section-2-secondary);
}

.section-2-tertiary {
    background-color: var(--section-2-tertiary);
}

.section-2-text {
    color: var(--section-2-accent);
}

.section-3-primary {
    background: url("/assets/media/global/theme-3.png"), var(--section-3-main);
}

.section-3-secondary {
    background-color: var(--section-3-secondary);
}

.section-3-tertiary {
    background-color: var(--section-3-tertiary);
}

.section-3-text {
    color: var(--section-3-accent);
}

.section-4-primary {
    background: url("/assets/media/global/theme-4.png"), var(--section-4-main);
}

.section-4-secondary {
    background-color: var(--section-4-secondary);
}

.section-4-tertiary {
    background-color: var(--section-4-tertiary);
}

.section-4-text {
    color: var(--section-4-accent);
}

@media screen and (max-width: 768px) {
    .section-photos {
        grid-template-columns: repeat(1, 1fr);
    }

    .section-preface-content {
        font-size: 2rem;
    }

    .section-photos {
        gap: 10vw;
    }

    .section-photo {
        font-size: 1.5rem;
    }
}