* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #000;
    overflow-x: hidden;
}

h3 {
  color: #000;
  font-size: clamp(1.2rem, 1.5vw, 2rem);
  font-family: "Georgia", serif;
}
h3 a {
  color: #000;
  text-decoration: none;
}
h3 a:visited {
  color: #000;
}
h3 a:hover {
  color: #000;
  text-decoration: none;
}
p {
  color: #000;     
  font-size: clamp(0.7rem, 1.5vw, 0.8rem);  
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
a {
  color: #0020c2;
  text-decoration: none;
}

a:visited {
  color: #0020c2;
}

a:hover {
  color: #000;
  text-decoration: underline #0020c2;
}

a:active {
  color: #000;
}

.mosaico-contenedor {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-auto-rows: auto;
    grid-auto-flow: dense; 
    width: 100%;
    
    min-height: 100vh;
    margin:0 auto;
}

.mosaico-item {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    aspect-ratio: 1 / 1;
}

.mosaico-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: center;
    display: block;
    image-rendering: auto; 
}


.dos-columnas {
    grid-column: span 2;
    aspect-ratio: 2 / 1;
}

.dos-filas {
    grid-row: span 2;
    aspect-ratio: 1 / 2;
}

.cuatro-espacios {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: 1 / 1;
}

.text-box {
  background-color: #FFEF00;
  color: #333;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;    
  text-align: center;
  aspect-ratio: 1 / 1;
}

@media (max-width: 600px) {

    .mosaico-contenedor {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 50vw;
    }

    .mosaico-item,
    .grid-item {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
    }

    .dos-columnas {
        grid-column: span 2;
    }

    .dos-filas {
        grid-row: span 2;
    }

    .cuatro-espacios {
        grid-column: span 2;
        grid-row: span 2;
    }
}