.will-and-sophie-logo {
    height: 120px;
    max-width: 100%;
    width: auto;
}

@media (min-width: 768px) {
    .will-and-sophie-logo {
        height: 180px;
    }
}

section {
    padding-inline: 1rem;
}

@media (min-width: 768px) {
    section {
        padding-inline: 5%;
    }
}

h1, h2, h3, .heading-class {
    font-family: "Playfair Display", serif;
}

.header, .photo-gallery, .travel, .rsvp {
    background-color: #003742;
}

@font-face {
    font-family: "Midland Luxury";
    src: url("./fonts/MidlandLuxuryItalic-Bold.otf") format("opentype");
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: "Proxima Nova";
    src: url("./fonts/ProximaNova-Semibold.otf") format("opentype");
}

nav {
    font-family: "Midland Luxury", serif;
    font-weight: bold;
    font-style: italic;
    font-size: .7rem;
}

nav a {
    margin: 0.5rem;
}

@media (min-width: 768px) {
    nav {
        font-family: "Midland Luxury", serif;
        font-size: 1rem;
    }
}

.t-title {
    font-family: "Midland Luxury", serif;
    font-weight: bold;
    font-style: italic;
    font-size: 1rem;
}

@media (min-width: 768px) {
    .t-title {
        font-size: 1.75rem;
    }
}

.t-subtitle {
    font-family: "Midland Luxury", serif;
    font-style: italic;
    font-size: .7rem;
}

@media (min-width: 768px) {
    .t-subtitle {
        font-size: 1rem;
    }
}

p, h3 {
    font-family: "Proxima Nova", serif;
    font-size: 1rem;
}

@media (min-width: 768px) {
    p, h3 {
        font-size: 1.2rem;
    }
}

.btn {
    font-family: "Proxima Nova", serif;
    font-size: 1.2rem;
}

@media (min-width: 768px) {
    .btn {
        font-size: 1.6rem;
    }
}

.photo-gallery img {
    height: 240px;
    width: 240px;
    transition: transform 0.3s ease;
}

.photo-gallery img:hover {
    transform: scale(1.05);
}

.side-image {
    display: none;
}

@media (min-width: 1024px) {
    .side-image {
        display: block;
        max-height: 180px;
    }
}

.nav-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
}

@media (min-width: 768px) {
    .nav-container {
        flex-direction: row;
        justify-content: center;
        gap: 1rem;
    }
}

.nav-divider {
    display: none;
}

@media (min-width: 768px) {
    .nav-divider {
        display: inline;
    }
}

.section-content {
    padding: 1rem;
}

@media (min-width: 768px) {
    .section-content {
        padding: 2rem;
    }
}

.nav-divider{
    font-size: large;
}