:root{
    --bg-contenedor:#fff;
    --color-enlace:hsl(0 0% 50%);
    --transition:all .3s ease;
    --color-principal:#004960;
	--color-secundario:#d18316;
}

*{
    padding:0;
    margin:0;
    box-sizing:border-box;
    font-family: "Arial", sans-serif;
}
img{
    width:100%;
    height:100%;
    vertical-align:middle;
}
.contenedor{
    width:min(100%,700px);
    margin:auto;
    background:var(--bg-contenedor);
    padding:1em;
}

#noticias{
    display:grid;
    gap:1em;
    a{
        position:relative;
        text-decoration:none;    
        display:block;
        color:var(--color-principal);
        transition:var(--transition);
        display:grid;
        grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
        gap:1em;
        align-items:center;
        &:hover{
            color:var(--color-secundario);
        }
        img{
            border-radius:.5em;
            &::before {
            content: 'Imagen no disponible';
            position: absolute;
            background: #fff;
            inset: 0;
            display: grid;
            place-content: center;
            padding: 1em;
            border: dashed 2px var(--color-secundario);
            font-size:.6em;
            color: var(--color-secundario);
            text-align: center;
          }
        }
    }
}
.spin-box{
  display:flex;
   place-items:center;
   flex-direction:column-reverse;
   gap:1em;
   &::before{
       content:'Cargando...';
       font-weight:bold;
       color:var(--ocre);
   }
}
.spin{
  width:var(--width,50px);
  aspect-ratio:1;
  border:.3em solid hsl(0 0% 70%);
  border-radius:50%;
  border-right-color:hsl(200 80% 50%);
  animation:spin 1s infinite linear;
}
@keyframes spin{
  100%{
      transform:rotate(360deg);
  }
}