@import url('https://fonts.googleapis.com/css2?family=Exo:wght@700&display=swap');

.ag-grating-uses-widget,
.ag-grating-uses-widget *{
  box-sizing:border-box !important;
}

.ag-grating-uses-widget{
  --ag-yellow:#EAAA04;
  --ag-white:#FFFFFF;
  --ag-border:#4A4A4A;
  --ag-black:#000000;

  width:100% !important;

  margin:0 !important;
  padding:70px 0 80px !important;

  background:#000000 !important;

  overflow:hidden !important;
}

/* =========================================================
   CONTENEDOR
========================================================= */

.ag-grating-uses-widget .ag-grating-uses__inner{
  width:min(1305px,calc(100% - 80px)) !important;

  margin:0 auto !important;

  padding:0 !important;
}

/* =========================================================
   TÍTULO
========================================================= */

.ag-grating-uses-widget .ag-grating-uses__title{
  width:100% !important;

  margin:0 0 50px !important;
  padding:0 !important;

  font-family:"Exo",sans-serif;

  font-weight:700;
  font-style:normal;

  font-size:50px;
  line-height:65px;

  letter-spacing:0;

  text-align:center !important;

  text-transform:none !important;

  color:var(--ag-white);
}

.ag-grating-uses-widget .ag-yellow{
  color:var(--ag-yellow);
}

/* =========================================================
   GRID
========================================================= */

.ag-grating-uses-widget .ag-grating-uses__grid{
  width:100% !important;

  display:grid !important;

  grid-template-columns:
    repeat(5,minmax(0,1fr)) !important;

  gap:10px !important;

  align-items:stretch !important;
}

/* =========================================================
   TARJETA
========================================================= */

.ag-grating-uses-widget .ag-grating-uses__card{
  width:100% !important;

  margin:0 !important;
  padding:0 !important;

  display:flex !important;

  flex-direction:column !important;

  align-items:stretch !important;
  justify-content:flex-start !important;

  background:#000000 !important;

  border:1px solid var(--ag-border) !important;

  overflow:hidden !important;
}

/* =========================================================
   IMAGEN
========================================================= */

.ag-grating-uses-widget .ag-grating-uses__media{
  width:100% !important;

  height:325px !important;

  margin:0 !important;
  padding:0 !important;

  overflow:hidden !important;

  background:#161616 !important;
}

.ag-grating-uses-widget .ag-grating-uses__image{
  display:block !important;

  width:100% !important;
  height:100% !important;

  margin:0 !important;
  padding:0 !important;

  object-fit:cover !important;
  object-position:center center !important;

  transition:transform .4s ease !important;
}

.ag-grating-uses-widget .ag-grating-uses__card:hover
.ag-grating-uses__image{
  transform:scale(1.035) !important;
}

/* =========================================================
   CUERPO DE TARJETA
========================================================= */

.ag-grating-uses-widget .ag-grating-uses__body{
  width:100% !important;

  min-height:128px !important;

  margin:0 !important;

  padding:
    16px
    18px
    14px !important;

  display:flex !important;

  align-items:flex-start !important;
  justify-content:flex-start !important;

  background:#000000 !important;
}

/* =========================================================
   TEXTO
========================================================= */

.ag-grating-uses-widget .ag-grating-uses__card-title{
  width:100% !important;

  margin:0 !important;
  padding:0 !important;

  font-family:"Exo",sans-serif;

  font-weight:700;
  font-style:normal;

  font-size:20px;
  line-height:25px;

  letter-spacing:0;

  text-align:left !important;

  text-transform:none !important;

  color:#FFFFFF;
}

.ag-grating-uses-widget .ag-grating-uses__line{
  display:block !important;

  width:100% !important;

  white-space:nowrap !important;
}

/* =========================================================
   LAPTOP
========================================================= */

@media (max-width:1200px) and (min-width:901px){

  .ag-grating-uses-widget .ag-grating-uses__inner{
    width:calc(100% - 60px) !important;
  }

  .ag-grating-uses-widget .ag-grating-uses__grid{
    gap:8px !important;
  }

  .ag-grating-uses-widget .ag-grating-uses__media{
    height:290px !important;
  }

  .ag-grating-uses-widget .ag-grating-uses__body{
    min-height:120px !important;

    padding:
      15px
      14px
      14px !important;
  }

  .ag-grating-uses-widget .ag-grating-uses__card-title{
    font-size:17px;
    line-height:23px;
  }

  .ag-grating-uses-widget .ag-grating-uses__line{
    white-space:normal !important;
  }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width:900px){

  .ag-grating-uses-widget{
    padding:
      65px
      0
      75px !important;
  }

  .ag-grating-uses-widget .ag-grating-uses__inner{
    width:calc(100% - 40px) !important;
  }

  .ag-grating-uses-widget .ag-grating-uses__title{
    margin-bottom:38px !important;

    font-size:42px;
    line-height:52px;
  }

  .ag-grating-uses-widget .ag-grating-uses__grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;

    gap:16px !important;
  }

  .ag-grating-uses-widget .ag-grating-uses__media{
    height:330px !important;
  }

  .ag-grating-uses-widget .ag-grating-uses__body{
    min-height:105px !important;

    padding:
      17px
      18px
      18px !important;
  }

  .ag-grating-uses-widget .ag-grating-uses__card-title{
    font-size:19px;
    line-height:25px;
  }

  .ag-grating-uses-widget .ag-grating-uses__line{
    display:inline !important;

    white-space:normal !important;
  }

  .ag-grating-uses-widget .ag-grating-uses__line::after{
    content:" " !important;
  }
}

/* =========================================================
   MÓVIL
========================================================= */

@media (max-width:560px){

  .ag-grating-uses-widget{
    padding:
      55px
      0
      65px !important;
  }

  .ag-grating-uses-widget .ag-grating-uses__inner{
    width:calc(100% - 28px) !important;
  }

  .ag-grating-uses-widget .ag-grating-uses__title{
    margin-bottom:30px !important;

    font-size:32px;
    line-height:40px;
  }

  .ag-grating-uses-widget .ag-grating-uses__grid{
    grid-template-columns:1fr !important;

    gap:16px !important;
  }

  .ag-grating-uses-widget .ag-grating-uses__media{
    height:350px !important;
  }

  .ag-grating-uses-widget .ag-grating-uses__body{
    min-height:auto !important;

    padding:
      18px
      18px
      20px !important;
  }

  .ag-grating-uses-widget .ag-grating-uses__card-title{
    font-size:18px;
    line-height:24px;
  }
}