body{
    background-color: var(--negro);
    color: white;
    text-align: center;
}

body h1{
    margin: 50px;
}

.banner__container {
    height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    background-image: url(../content/banners/foto-de-producto.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.banner__container h1{
    font-size: 60px;
    font-weight: 700;
    margin: 50px 0 0;
    opacity: 0.9;
    font-family: Title;
}

.banner__container p{
    font-weight: 500;
}



@media (max-width: 480px) {
    .banner__container {
    height: 60vh;
    }
    .banner__container h1{
        color: var(--blanco);
        font-size: 30px;
        font-weight: 400;
        margin: 40px 30px 0 30px;
    }
    .banner__container p{
        font-size: 12px;
    }
}








.servicios__fotograficos{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
  }
.servicios__fotograficos h1{
    font-size: 35px;
    margin: 50px 0;
  }




.grid__sf__container1,
.grid__sf__container2{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    place-items: center;
    gap: 0;
    width: 100%;
}

.grid__unique__container{
    background-color: var(--negro);
    height: 500px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0;     
    display: flex;
    flex-direction: column;
}

.grid__unique__container h3{
    font-size: 24px;
    margin: 10px 20%;
}

.grid__unique__container p{
    font-size: 16px;
    margin: 0 20%;
    color: var(--gris__claro);
}

.grid__sfbg1,
.grid__sfbg2,
.grid__sfbg3,
.grid__sfbg4,
.grid__sfbg5,
.grid__sfbg6,
.grid__sfbg7 {
    height: 500px;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.grid__sfbg1{
    background-image: url(../content/banners/fotografia-medica.jpg);
}

.grid__sfbg2{
    background-image: url(../content/banners/retratos-profesionales.jpg);
}

.grid__sfbg3{
    background-image: url(../content/banners/fotografia-de-eventos-empresariales.jpg);
}

.grid__sfbg4{
    background-image: url(../content/banners/fotografia-industrial.jpg);
}

.grid__sfbg5{
    background-image: url(../content/banners/fotografia-comercial.jpg);
}

.grid__sfbg6{
    background-image: url(../content/banners/fotografia-de-alimentos.jpg);
}

.grid__sfbg7{
    background-image: url(../content/banners/fotografia-de-producto.jpg);
}

.resaltar{
    font-weight: 700;
    color: white;
    background-color: rgba(255, 255, 255, 0.274);
}

@media (max-width: 850px) {
    .grid__sf__container1,
    .grid__sf__container2 {
        display: flex;
    }

    .grid__sf__container1{
        flex-direction: column;
    }
    .grid__sf__container2{
        flex-direction: column-reverse;
    }

    .servicios__fotograficos h1{
        font-size: 40px;
        margin: 100px 50px 50px 50px;
        color: var(--gris__claro);
    }

    .grid__unique__container{
    background-color: var(--negro);
    height: 200px;
    }

    .grid__sfbg1,
    .grid__sfbg2,
    .grid__sfbg3,
    .grid__sfbg4,
    .grid__sfbg5,
    .grid__sfbg6,
    .grid__sfbg7 {
        height: 400px;
    }
}

@media (max-width: 480px) {

    .servicios__fotograficos h1{
    font-size: 25px;
    }

    .grid__unique__container p,
    .grid__unique__container h3{
    margin: 5px 25px;
    text-align: start;
    }

    .grid__unique__container{
    background-color: var(--negro);
    height: 300px;
    }
    

    .grid__sfbg1,
    .grid__sfbg2,
    .grid__sfbg3,
    .grid__sfbg4,
    .grid__sfbg5,
    .grid__sfbg6,
    .grid__sfbg7 {
        height: 250px;
    }
    
}