@media (min-width: 48rem) {
  header {
    min-height: 5rem;
    padding-block: 1.5rem;
  }

  header a {
    font-size: 0.75rem;
  }

  .portada {
    display: grid;
    min-height: calc(100svh - 5rem);
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
    gap: 2rem;
    padding-block: 2rem clamp(5rem, 14vh, 10rem);
  }

  .portada__imagen {
    grid-column: 7 / 13;
    grid-row: 1;
    aspect-ratio: 4 / 5;
  }

  .portada__imagen img {
    object-position: var(--posicion-escritorio, var(--posicion-movil, 50% 50%));
  }

  .portada__texto {
    grid-column: 1 / 7;
    grid-row: 1;
    align-self: center;
    padding-block: 2rem;
  }

  .portfolio__grilla {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .portfolio__grilla > button[data-composicion="ancho-completo"] {
    grid-column: 1 / -1;
  }

  .portfolio__grilla > button[data-composicion="vertical-destacada"] {
    grid-column: 4 / 10;
  }

  .portfolio__grilla > button[data-composicion="pareja-izquierda"] {
    grid-column: 1 / 7;
  }

  .portfolio__grilla > button[data-composicion="pareja-derecha"] {
    grid-column: 7 / 13;
  }

  .portfolio__grilla > button[data-composicion="desplazada-izquierda"] {
    grid-column: 1 / 6;
  }

  .portfolio__grilla > button[data-composicion="desplazada-derecha"] {
    grid-column: 8 / 13;
    margin-top: clamp(2rem, 8vw, 7rem);
  }

  .portfolio__grilla .marcador-imagen--uno {
    grid-column: 1 / 8;
    aspect-ratio: 4 / 3;
  }

  .portfolio__grilla .marcador-imagen--dos {
    grid-column: 9 / 13;
    margin-top: 18%;
  }

  .portfolio__grilla .marcador-imagen--tres {
    grid-column: 2 / 7;
    margin-top: 2rem;
  }

  .portfolio__grilla .marcador-imagen--cuatro {
    grid-column: 8 / 13;
    margin-top: 8rem;
  }

  .portfolio__grilla .marcador-imagen--cinco {
    grid-column: 1 / 5;
    margin-top: 3rem;
  }

  .portfolio__grilla .marcador-imagen--seis {
    grid-column: 5 / 11;
    aspect-ratio: 4 / 3;
    margin-top: 1rem;
  }

  .portfolio__grilla .marcador-imagen--siete {
    grid-column: 11 / 13;
    margin-top: 5rem;
  }

  .portfolio__grilla .marcador-imagen--ocho {
    grid-column: 3 / 9;
    margin-top: 2rem;
    margin-left: 10%;
  }

  .presentacion {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
    gap: 2rem;
    padding-block: 2rem clamp(6rem, 16vh, 11rem);
  }

  .presentacion__retrato {
    grid-column: 2 / 7;
  }

  .presentacion__texto {
    grid-column: 8 / 13;
    grid-row: 1;
  }

  h1 {
    margin-bottom: 1.75rem;
  }

  main p {
    font-size: 1.0625rem;
  }
}

@media (min-width: 75rem) {
  :root {
    --espacio-borde: clamp(4rem, 8vw, 8rem);
  }

  header {
    min-height: 5.5rem;
  }

  .portada {
    padding-right: var(--espacio-borde);
  }

  .portada__texto h1 {
    font-size: clamp(5rem, 8vw, 8rem);
  }

  .portfolio__grilla {
    column-gap: 2rem;
    row-gap: 1.5rem;
  }

  .presentacion {
    column-gap: 4rem;
  }

  .contacto {
    padding-right: 12vw;
  }
}