.donation-container{
    display: grid;
}

/* TITLE */
.donation-title-contain{
    display: grid;
    grid-column-gap: 4rem;
    grid-template-columns: 1fr .6fr;
}

.donation-title{
    font-size: calc( 5rem + 6.5vh );
    color: var(--black);
    line-height: 100%;
    padding-bottom: 4rem;
}

.donation-title-img{
    background-position: right;
    background-position-x: 80%;
    background-size: cover;
    background-repeat: no-repeat;
}


/* COLUMNS */
.donation-content{
    margin: 5rem 0;
    display: grid;
    grid-gap: 6rem;
}

.donation-text span{
    font-size: 2.5rem;
    line-height: 100%;
}


.donation-row{
    display: grid;
    grid-template-columns: .8fr 1fr .8fr;
    margin-top: 3rem;
}

.donation-row-same{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 2rem;
    grid-row-gap: 2rem;
}

.donation-column{
    display: grid;
    grid-template-rows: 1fr 1fr;
    padding: 2rem;
}

.donation-btn-contain{
    display: grid;    
    align-content:center;
    text-align: center;
    margin: 0 5rem;
}

.donation-ul{
    list-style: none;
}

.donation-column-title{
    font-size: 2.63rem;
}
.donation-block{
    grid-row: 1 / -1;
    display: grid;
    justify-content: start;
    align-content: center;
    grid-gap: 2rem;    
}

.donation-grid-block img{

}

.donation-border-left{
    border-left: solid 1px ;
}

.donation-border-right{
    border-right: solid 1px ;
}
.donation-info{
    font-size: 1.4rem;
    line-height: 100%;
}

.donation-textarea{
    margin: 2rem 0;
}

.donation-grid-block{
    grid-column: 1 / -1;
    display: grid;
    justify-content: center;
}

.donation-grid-block img{
    filter: grayscale(100%);
}

.donation-contact-info{
    display: grid;
    grid-template-columns: 1fr .5fr;
}

/* Contact */
.donation-contact-text p{
    font-size: 1.4rem;
    line-height: 100%;
}

.donation-contact-text {
    display: grid;
    justify-content: end;
    align-content: end;
}

.donation-contact-title span{
    font-size: calc( 4rem + 6vh );
    line-height: 100%;
    text-align: end;
}


.donation-movile{
    display: none;
}

.bg-a{
    background-color: cadetblue;
}


.donation-subelement{
    opacity: 0;
    visibility: hidden;
    height: 0;
}

.donation-active{
    opacity: 1;
    visibility: visible;
    height: auto;
}

.input-open-donation{
    display: grid;
}

.donation-open{
    grid-template-columns: 1fr .1fr;
    justify-content: end;
    align-content: end;
}

.donation-desktop{
    display: grid;    
}

.donation-img{
    justify-content: center;
    align-content: center;
}

.donation-img img{
    filter: grayscale(100%);
}

@media (max-width: 1000px) {
    
    .donation-title-contain{
        grid-template-columns: 1fr;
    }
    
    .donation-title-img {
        width: 40rem;
        height: 80rem;
        justify-self: center;
    }


    .donation-text span {
        font-size: 1.5rem;
    }

    .donation-row{
        grid-template-columns: 1fr;
    }

    .donation-movile{
        display: grid;

    }

    .donation-desktop{
        display: none;
    }

    .donation-grid-movile{
        grid-gap: 1rem;
        margin: 2rem 0;
    }

    .donation-img-movile{
        height: 10rem;
        display: grid;
        justify-content: center;
    }

    .donation-column {
        grid-template-rows: auto;
        padding: 0;
    }

    .donation-open{
        font-size: 1.5rem;
    }

    .donation-border-right, .donation-border-left{
        border:none;
    }

    .donation-row-same{
        grid-template-columns: 1fr;
    }

    .donation-contact-info{
        grid-template-columns: 1fr;
        grid-row-gap: 2rem;
    }

    .donation-contact-title{
        grid-row: 1 / -1;
        text-align: end;
    }
}    



@media (max-width: 500px) {

    .donation-title-img {
        width: 25rem;
        height: 40rem;
    }

    .donation-title{
        font-size: 1.5rem;
    }

    .donation-border-left, .donation-border-right{
        border:none;
    }

    .donation-content {
        grid-gap: 3rem;
    }

    .donation-grid{
        border-bottom: solid 1px;
        padding-bottom: 2rem;
    }

    .donation-contact-title span {
        font-size: calc( 4rem + 3vh );
    }
}


@media (max-width: 400px) {

    .donation-title-img {
        width: 20rem;        
    }

}