html,
 body {
     overflow-x: hidden;
 }

 .galeria-timeline-revmex {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     grid-template-rows: auto;
     gap: 1rem;
     justify-items: center;
     align-items: center;

 }

 .recurso{
 font-family: "MerriweatherSans-Bold", serif;
font-weight: bold;
 }

 .card-galeria{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
 }

 .card-galeria p{
    text-align: center;
    line-height: 1.2;
 }


 .draggable {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: move;
     transition: opacity 0.2s;
     max-width: 100%;
     overflow: hidden;
 }

 .containerCharacters .draggable.dragging {
     /**/
     width: auto;
     height: 20rem
 }

 .draggable:hover {
     opacity: 0.5;
 }

 .droppable {
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     text-align: center;
     font-size: 1.4rem;
     font-weight: bold;
     /* background-color: #92d6dd; */
     /* outline: 5px dashed #282445; */
     transition: border-width 0.2s, transform 0.2s, background-color 0.4s;
     /**/
     position: relative;
     overflow: hidden;
 }

 .droppable span {

     font-size: 1.25rem;
     pointer-events: none;
     text-align: center;
 }

 .droppable p {
     max-width: 90%;
     text-align: center;
 }

 .droppable.droppable-hover {
     border-width: 5px;
     transform: scale(1.1);
 }

 .droppable.dropped {
     border-style: solid;
     color: #fff;
 }

 .droppable.dropped span {
     font-size: 0.75rem;
     margin-top: 0.5rem;
 }

 .droppable.dropped i {
     pointer-events: none;
 }

 .draggable.dragged {
     user-select: none;
     opacity: 0;
     cursor: default;
     /**/
     position: absolute;
     z-index: 4;
 }


 /**agregado**/
 .droppable .dragged {
     position: absolute;
     top: 50%;
     left: 50%;
     /* transform: translate(-50%, -50%); */
     width: 100%;
     height: 100%;
     max-width: 100%;
     max-height: 100%;
     object-fit: cover;
     opacity: 1;
     z-index: 4;
 }

 .dragged {
     width: 100%;
     height: 100%;
     object-fit: cover;
     /* Ajusta la imagen sin distorsión */
     display: block;
 }

 /****/


 /* .draggable.dragged:hover {
     opacity: 0.1;
 } */

 .draggable-elements {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
 }

 .droppable-elements {
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-direction: column;
 }

 .container-Check {
     width: 4vw;
 }

 .containerCharacters:hover {
     -webkit-transform: scale(1.2);
     -moz-transform: scale(1.2);
     -ms-transform: scale(1.2);
     -o-transform: scale(1.2);
     transform: scale(1.2);
     transition: .3s ease-in-out;
 }

 .droppable.dropped p {
     color: white;

 }

 .droppable.dropped p span {
     font-size: 1.25rem;
 }

 /**/
 .timeline-revmex {
     display: inline-flex;
 }

 /* 
 .box-img-revmex {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 140px;
     height: 140px;
     border-radius: 20px;
     font-size: 1.4rem;
     font-weight: bold;
     transition: border-width 0.2s, transform 0.2s, background-color 0.4s;
     margin: 0 auto;

 } */

 /**/
 .grid-timeline {
     display: grid;
     grid-template-columns: repeat(13, 1fr);
     gap: 0px;
 }

 .orange-borde {
     border: 3px solid #edab19;
 }

 .purple-borde {
     border: 3px solid #6e4493;
 }

 .pink-borde {
     border: 3px solid #e6236c;
 }

 .blue-borde {
     border: 3px solid #007d9a;
 }

 .green-borde {
     border: 3px solid #b0cb3b;
 }

 .dark-borde {
     border: 3px solid #072834;
 }

 .line-vrtcl {
     width: 3px;
     max-width: 3px;
     height: 40px;
     margin: 0 auto;
 }

 .orange {
     background-color: #edab19;
 }

 .purple {
     background-color: #6e4493;
 }

 .pink {
     background-color: #e6236c;
 }

 .blue-line {
     background-color: #007d9a;
 }

 .green {
     background-color: #b0cb3b;
 }

 .dark {
     background-color: #072834;
 }

 .container-imgs {
     display: grid;
     grid-template-rows: auto auto;
     justify-content: center;
 }
 .dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 50%;
  }

.box-year-sup{
   display: flex;
   justify-content: center;
   align-items: flex-end;

}
.year {
    font-family: "MerriweatherSans-ExtraBold";
    text-align: center;
    margin-bottom: 0;
}

.foto-link:hover{
  filter: drop-shadow(2px 4px 6px black);

}

 @media (min-width: 992px) and (max-width: 1199.99px) {

     .line-h-timeline{
         position: relative;
         display: grid;
         width: 56px;
         height: 25px;
         justify-content: center;
     }

     .box-img-revmex {
         display: flex;
         justify-content: center;
         align-items: center;
         width: 56px;
         height: 46px;
         border-radius: 6px;
         font-size: 1.4rem;
         font-weight: bold;
         transition: border-width 0.2s, transform 0.2s, background-color 0.4s;
         margin: 0 auto;
     }
 }

 @media (min-width: 1200px) and (max-width: 1399.99px) {
    .line-h-timeline{
        position: relative;
        display: grid;
        width: 68px;
        height: 25px;
        justify-content: center;
    }

    .box-img-revmex {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 68px;
        height: 58px;
        border-radius: 6px;
        font-size: 1.4rem;
        font-weight: bold;
        transition: border-width 0.2s, transform 0.2s, background-color 0.4s;
        margin: 0 auto;
    }

 }

 
 @media (min-width: 1400px) and (max-width: 1919.99px) {
    .line-h-timeline{
        position: relative;
        display: grid;
        width: 68px;
        height: 25px;
        justify-content: center;
    }

    .box-img-revmex {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 68px;
        height: 58px;
        border-radius: 6px;
        font-size: 1.4rem;
        font-weight: bold;
        transition: border-width 0.2s, transform 0.2s, background-color 0.4s;
        margin: 0 auto;
    }

 }

  
 @media (min-width: 1920px)  {
    .line-h-timeline{
        position: relative;
        display: grid;
        width: 68px;
        height: 25px;
        justify-content: center;
    }

    .box-img-revmex {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 68px;
        height: 58px;
        border-radius: 6px;
        font-size: 1.4rem;
        font-weight: bold;
        transition: border-width 0.2s, transform 0.2s, background-color 0.4s;
        margin: 0 auto;
    }


 }

/*////////////////////////////////////////////////////////////////////*/

.grid-timeline-movil{
    display: grid;
    grid-template-columns: 48% 4% 48%;
}
.grid-info{
    display: grid;
    grid-template-rows: auto;
}

.anio{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
}
.line-horizontal{
    width: 75%;
    height: 3px;
}

.box-img-revmex {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 56px;
    height: 46px;
    border-radius: 6px;
    font-size: 1.4rem;
    font-weight: bold;
    transition: border-width 0.2s, transform 0.2s, background-color 0.4s;
    margin: 0 auto;
}