* {
  /* outline: 1px solid red; */
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: #b6fcd2;
}

.container {
  width: min(1200px, 90%);
  margin: 40px auto;

  display: flex;
  flex-direction: column;
  gap: 32px;
}


/* Estilos generales */
:is(.sect, .sect-2, .sect-3) {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 32px;
}

.sect :is(figure, div, img), .sect-2 :is(figure, div) {
  width: 80%;
  max-width: 300px;
  height: 300px; 
  background-color: beige;
  border-radius: 8px;
}


/* section 1 */
/* figure */
.sect figure > img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

/* div */
.sect div {
  background-image: url(https://pbs.twimg.com/media/GowBS3NWcAA_Zgo?format=jpg&name=large);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* img */
.sect > img {
  aspect-ratio: 1/1;
  object-fit: cover;
}


/* section 2 */
/* figure */
.sect-2 figure > img {
  width: 100%;
  /* height: 100%; */ /* <- no tiene height definido como la img del sect 1, por lo que mantiene su tamaño incluso si se hace muy pequeña*/
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 8px;
}

/* div */
.sect-2 div {
  background-image: url(https://pbs.twimg.com/media/F7NBmEnWEAANm47?format=jpg&name=medium);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* img */
.redond {
  width: 300px;
  height: 300px;
  aspect-ratio: 1/1;
  border-radius: 100%; /* apartir de 50% también funciona, solo necesitas mismas medidas en w y h */

  object-fit: cover;
  object-position: top left;
}


/* section 3 */
/* Imágenes adaptativas */
.sect-3 > picture {
  width: 80%;
  max-width: 300px;
  height: 300px;
  aspect-ratio: 1/1;
  background-color: beige;
  border-radius: 8px;
}

picture > img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
}

/* ícono */
.icon {
  background-color: bisque;
  padding: 16px;
  border-radius: 8px;
  height: max-content;

  align-self: center;
}

/* Aparece la imagen icono.png antes del texto “Texto con ícono”. */
.icon::before {
  content: url("img/icono.png");
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
}

/* div con sombra interna */
.card {
  width: 80%;
  max-width: 300px;
  height: 300px;
  border-radius: 8px;

  display: grid;
  place-content: center;

  background:
    linear-gradient(rgba(0, 0, 0, 0.096), rgba(0, 0, 0, 0.123)),
    url(https://pbs.twimg.com/media/Go6HoYxXcAA4wQY?format=jpg&name=medium) center / cover;
}

.card > h3 {
  font-size: 2rem;
  color: bisque;
}