.tiles {
  margin: 40px 0;
}
.tiles__container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
.tiles__box {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "img  title" "text text";
  align-items: start;
  column-gap: 20px;
  row-gap: 16px;
}
.tiles__box img {
  grid-area: img;
  width: 110px;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.tiles__box img[src=""], .tiles__box img:not([src]) {
  display: none;
}
.tiles__box__title {
  grid-area: title;
  align-self: start;
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #000000;
}
.tiles__box__text {
  grid-area: text;
  margin: 0;
}
@media (min-width: 800px) {
  .tiles {
    margin: 60px 0;
  }
  .tiles__container {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 50px;
  }
  .tiles__box {
    column-gap: 28px;
  }
  .tiles__box img {
    width: 140px;
  }
  .tiles__box__title {
    font-size: 20px;
  }
}
@media (min-width: 1040px) {
  .tiles {
    margin: 80px 0;
  }
  .tiles__container {
    gap: 60px 70px;
  }
}
@media (min-width: 1240px) {
  .tiles {
    margin: 90px 0;
  }
  .tiles__container {
    gap: 70px 80px;
  }
}