* {
      box-sizing: border-box;
      padding: 0;
      margin: 0;
}

html {
      font-size: 62.5%;
      font-family: 'Roboto', sans-serif;
}

main {
      max-width: auto;
      margin: 0 auto;
}

.hero {
      display: grid;
      /* grid-template-columns: 1fr 1fr; */
      grid-template-columns: minmax(300px, 1fr) 1fr;
      grid-auto-rows: 650px;
      background-color: #212121;
}

.hero__info {
      align-self: center;
      justify-self: center;
      max-width: 70rem;
      padding: 2rem;
}

.hero__title {
      color: #ededed;
      font-size: 5rem;
      padding-bottom: 2rem;
}

.hero__text {
      color: #ededed;
      font-size: 3rem;
}

.hero__image {
      width: 100%;
      height: 100%;
      object-fit: contain;
}


.gente-mugrosa {
      /* width: 100%; */
      height: auto;
      font-size: 3rem;
      color: blue;
      max-width: 800px; 
      margin: auto;
}
.contenedor__principal p {
      display: grid;
      justify-content: center;
      max-width: 90%;
      margin: 4rem auto;
}
.contenedor__principal img {
      display: grid;
      margin: 4rem auto;
      max-width: 800px;
}
.contenedor__principal audio {
      display: grid;
      margin: 4rem auto;
}


/* ------------------------------------------------------------ */
/*                        SEGUNDA SECCION                       */
/* ------------------------------------------------------------ */

.ourServices {
      margin: 10rem 0;
}

.ourServices__title {
      font-size: 3rem;
      color: #212121;
      font-weight: bolder;
      text-align: center;
      padding: 5rem;
      
}

.ourServices__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 250px));
      grid-auto-rows: 1fr;
      gap: 2.5rem;
      place-content: center;
}

.ourServices__item {
      width: 100%;
      height: auto;
      align-self: center;
}

.ourServices__item--video {
      background-color: #19c252;
      grid-area: 1 / 1 / 2 / 2;
      
      height: auto;
}

div iframe {
      display: grid;
      place-content: center;
      justify-content: center;
}


/* ------------------------------------------------------------ */
/*                        TERCERA SECCION                       */
/* ------------------------------------------------------------ */
.marcas {
      margin-bottom: 100px;
}
.marcas__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(100px, 250px));
      /* grid-auto-rows: 1fr; */
      gap: 2.5rem;
      place-content: center;

      /* background-color: #585857; */
}

.marcas__imagen img {
      width: 100%;
      height: 100%;
}

/* ------------------------------------------------------------ */
/*                       SECCION DE FOOTER                      */
/* ------------------------------------------------------------ */

.footer {      
      background-color: #fb8c00;      
      color: #212121;      
      font-size: 2rem;
}

.footer__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      
      padding: 20px;
      justify-content: center;
      gap: 20px;
}

/* .footer__title {
font-size: 2rem;
color: #ededed;
} */

.footer__item {
      margin: 0 auto;  /* Con esto ya pude centrarlo */
      padding: 10px;
      width: 320px;
} 

.footer__autor{
      display: grid;
      grid-template-columns: 1fr;
      justify-items: center;
      padding-bottom: 20px;
      width: auto;
}

/* ------------------------------------------------------------ */
/*                     SECCION RESPONSIVA                       */
/* ------------------------------------------------------------ */

@media screen and (max-width: 768px) {

      .gente-mugrosa {
            width: 425px;
            font-size: 1.6rem;
      }
      .contenedor__principal p {
      }
      .contenedor__principal img {
            max-width: 425px;
      }
      .contenedor__principal audio {
            display: grid;
            margin: 4rem auto;
      }

      .hero {
            grid-template-columns: minmax(300px, 500px);
            grid-auto-rows: 450px;
            justify-content: center;
      }

      .hero__image {
            grid-area: 1 / 1 / 2 / 2;
      }

      .ourServices__grid, .marcas__grid {
            grid-template-columns: repeat(auto-fit, minmax(320px, 425px));
            grid-auto-rows: .7fr;
      }

      .ourServices__item--video {
            grid-area: 1 / 1 / 2 / 2;
      }

      /* .marcas__grid {
            grid-template-columns: repeat(auto-fit, minmax(320px, 425px));
      } */
      .footer {  
            font-size: 1.2rem;
      }

      .footer__item {
            width: 280px;
      } 

}