.parent {
width: 100%;
margin: 40px auto 0;

display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 20px;
grid-row-gap: 20px;
}

.parent .item {
background: #efefef;
padding: 10px 24px 20px;
border: 2px solid #fff;
border-radius: 12px;
transition: transform 0.3s ease;
}

.parent .item:hover {
/*transform: scale(1.04);*/
box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.5);
/*box-shadow: 0px 0px 8px 4px rgba(0, 141, 208, 0.5);*/
}

.parent .item:first-child {
grid-row: span 2;
}

.parent {
justify-content: stretch;
align-content: space-evenly;
}

.parent .item h2 {
color: #003496;
}

.parent .item h3 {
font-size: calc(16px + (18 - 16) * (100vw - 300px) / (1000 - 300));
color: #008DD0;
}

.parent .item h3::before {
  content: "";
  display: inline-block;
  width: 50px; /* Ajusta el tamaño del icono */
  height: 50px;
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 10px; /* Espacio entre icono y texto */
  vertical-align: middle; /* Alineación vertical */
}
.parent .item h3.naming::before {
  background-image: url('/sites/default/files/iconos/naming.png');
}
.parent .item h3.consultoria::before {
  background-image: url('/sites/default/files/iconos/consultoria.png');
}
.parent .item h3.identidad::before {
  background-image: url('/sites/default/files/iconos/identidad.png');
}
.parent .item h3.manual::before {
  background-image: url('/sites/default/files/iconos/manual.png');
}

.parent .item h3.editorial::before {
  background-image: url('/sites/default/files/iconos/editorial.png');
}
.parent .item h3.infografia::before {
  background-image: url('/sites/default/files/iconos/infografia.png');
}

.parent .item h3.uiux::before {
  background-image: url('/sites/default/files/iconos/uiux.png');
}
.parent .item h3.social::before {
  background-image: url('/sites/default/files/iconos/social.png');
}

.parent .item h3.packaging::before {
  background-image: url('/sites/default/files/iconos/packaging.png');
}
.parent .item h3.unboxing::before {
  background-image: url('/sites/default/files/iconos/unboxing.png');
}

.parent .item h3.signal::before {
  background-image: url('/sites/default/files/iconos/signal.png');
}
.parent .item h3.ambiental::before {
  background-image: url('/sites/default/files/iconos/ambiental.png');
}

@media (max-width: 600px) {
  .parent {
    grid-template-columns: 1fr;
  }
}