/* ===================================
    Cover
====================================== */

.cover{
  position: relative;
}

.grid-cover{
  display: grid;
  grid-template-columns: 1fr;
}

.sticky-blog {
    width: auto;
    position: relative;
    top: 0px;
    display: inline-block;
    display: flex;
    justify-content: flex-end;
}




.cover .portada{
  width: 100%;
  position: relative;
  top:0px;
  left:0px;
}

.cover .logo{
  width: 80px;
  position: relative;
  right: 0px;
}

.title-cover{
  position: absolute;
  bottom: -70px;
  left: 10px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin: 0;
}

.cover .description{
  width: 90%;
  position: relative;
  left: 10px;
  top: 100px;
}

/* ===================================
    Global
====================================== */


/* ===================================
    responsive
====================================== */

/* xxs */ @media (max-width: 430px) {}
/* xs  */ @media (min-width: 431px) {} /* @media (max-width: 575px) {} */
/* sm  */ @media (min-width: 576px) {

.title-cover{bottom: -70px;left:0px; }
.cover .description{width: 100%;left: 0px;top: 100px;}
.cover .portada{width: 100%;}

}
/* md  */ @media (min-width: 768px) {




.title-cover{bottom: -150px;}
.cover .description{width: 50%;left: 350px;top: 50px;}

} /* ipad Portrait */
/* lg  */ @media (min-width: 992px) {

.cover .portada{width: 100%;left: -70px;}

.title-cover{bottom: -150px;}
.cover .logo{width: 120px;
position: relative;
right: auto;}
.cover .description{width: 50%;left: 400px;top: 50px;}

.grid-cover{
  display: grid;
  grid-template-columns: auto 130px;
}

.sticky-blog {
    width: 100%;
    position: sticky;
    top: 0px;
    display: inline-block;
}




} /* ipad Landscape */
/* xl  */ @media (min-width: 1200px) {

.grid-cover{
  display: grid;
  grid-template-columns: auto 150px;
}

.title-cover{bottom: -130px;}

}
/* xxl */ @media (min-width: 1400px) {}