/* =========================
   TABLET STYLES
   769px - 1024px
========================= */


@media (max-width:1024px) and (min-width:769px) {


    .about {

        flex-direction: column;

        align-items: center;

    }


    .about-images {

        justify-content: center;

    }


    .hero h1 {

        font-size: 45px;

    }


    .main-about-image {

        width: 300px;

    }


    .small-about-images img {

        width: 170px;

    }


}



/* =========================
   MOBILE STYLES
   768px and below
========================= */


@media (max-width:768px) {


    /* NAVIGATION */

    nav {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 15px 20px;

}

    nav h2 {

        font-size: 16px;

        white-space: nowrap;

        margin: 0;

    }


    .desktop-name {

        display: none;

    }


    .mobile-name {

        display: block;

        font-size: 20px;

        margin: 0;

    }


    .menu-toggle {

    display: block;

    width: 35px;

    cursor: pointer;

    margin-left: auto;

    flex-shrink: 0;

}


    .nav-links {

    display: flex;
    flex-direction: column;

    width: 100%;

    text-align: center;

    position: absolute;

    top: 100%;

    left: 0;

    background: black;

    max-height: 0;

    overflow: hidden;

    opacity: 0;

    transition:
        max-height .45s ease,
        opacity .35s ease,
        padding .35s ease;

}

    .nav-links.active {

    max-height: 450px;

    opacity: 1;

    padding: 15px 0;

}

    .nav-links li {

        margin: 10px 0;

    }




    /* HERO */


    h1 {

        font-size: 38px;

    }


    .hero h2 {

        font-size: 24px;

    }




    /* ABOUT */

.about{

    flex-direction: column;

    align-items: center;

    text-align: center;

}

.about-text{

    width: 100%;

    margin-top: 25px;

}
.about-images {

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

}


.main-about-image {

    width:260px;

}


.small-about-images {

    display:flex;

    flex-direction:row;

    justify-content:center;

    gap:12px;

}


.small-about-images img {

    width:140px;
    height:90px;
    object-fit:cover;

}


    /* SERMONS */


    .sermon-container {

        grid-template-columns: 1fr;

    }


    .sermon-buttons {

        flex-direction: column;

    }




    /* GENERAL */


    section {

        padding: 60px 20px;

    }


}
@media (max-width:768px){


    .album-container {

        grid-template-columns: 1fr;

        width: 100%;

        padding: 0 10px;

    }


    .album-card {

        width: 100%;

        max-width: 350px;

        margin: auto;

    }


    .album-card img {

        height: 220px;

    }


    .album-info {

        padding: 20px;

    }


    .album-info h3 {

        font-size: 22px;

    }


}
@media(max-width:768px){

    .photo-grid{

        grid-template-columns:1fr;

    }


    .photo-grid img{

        height:250px;

    }

}
@media(max-width:768px){

    .photo-grid{

        grid-template-columns:repeat(2,1fr);

        gap:15px;

    }


    .photo-grid img{

        height:180px;

    }

}
@media(max-width:768px){

    .program-flyer{

        max-width:95%;

    }

}