:root {
  --colorTheme: #E54C4C;
}

a {
  color: #fff;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 10px;
  color:#fff;
  background-color:  #E54C4C;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
}

img {
  display: block;
  width: 100%;
  height: auto;
}
.logo {
  width:75vw;
}

.text-light {
  font-weight: 300;
}

.text-bold {
  font-weight: bold;
}
.text-small {
  font-size: 12px;
}
.grid {
  background: var(--colorTheme);
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  font-weight: 300;
  display: grid;
  grid-gap: 2em;
  min-height: 100vh;
  padding: 1em;
}

.grid span {
  display: block;
}

.cover {
  background-image: url(https://mom-lab.studio/animal/images/textura-pato-loro-glitch-min.jpg);
}
.cover img {
  height: 100%;
  object-fit: cover;
}

.title .text-bold {
  font-family: 'Poppins', sans-serif;
}

.title--primary,
.title--secondary,
.info {
  z-index: 2;
}

.title--secondary {
  text-align: right;
}

.title--secondary .text-bold {
  font-size: max(6vw, 40px);
}

.title--primary .text-bold {
  font-size: max(6vw, 40px);
}

.info {
  grid-column: 1/2;
  list-style: none;
  margin: 0;
  padding: 0;
}

.info li {
  margin-top: 1.5em;
}

@media (min-width: 860px) {
  .grid {
    grid-template-rows: minmax(1em, auto) max-content 1fr 3em minmax(1em, auto);
    grid-template-columns: 4fr repeat(4, 1fr) 4fr;
    grid-gap: 0 10px;
    height: 100vh;
    min-height: 600px;
  }

  .title--secondary {
    grid-row: 2/3;
    grid-column: 1 / 3;
  }

  .text--secondary .text-light {
    /* grid-column: 2/3; */
  }

  .title--secondary .text-bold {
    /* grid-column: 2/3; */
  }

  .title--primary {
    grid-row: 4/6;
    grid-column: 5/7;
  }
  .inscripciones {
    z-index:4;
    grid-row: 8/6;
    grid-column: 1/7;
  }
  .cover {
    grid-row: 2/5;
    grid-column: 2 / span 4;
  }

  .info {
    grid-row: 3/5;
    grid-column: 1/2;
    align-self: flex-end;
  }
}
/* ---------------------------------------------- */
 /* Backgrounds */

 .cover {
   animation: scroll 100s linear infinite;
 }

 @keyframes scroll {
    100%{
     background-position:0px -3000px;
   }
 }

 /* ---------------------------------------------- */