@media (max-width: 767px) {
    .block-text-image {
        margin-top: 150px;
        margin-bottom: 150px !important;
    }

    .block-text-image div {
        flex-direction: column-reverse;
    }
    .block-text-image h2 {
        font-size: 4rem;
        line-height: 1.2;
        margin-bottom: 0;
        text-transform: uppercase;
    }

    .block-text-image img {
        aspect-ratio: 3/2;
        width: 100%;
        object-fit: cover;
    }
    .block-text-image.circularcolutions img {
        border-color: #ADBF00;
    }

    .block-text-image.bestpractice img {
        border-color: #458933;
    }

    .block-text-image.info img {
        border-color: #00603F;        
    }

    .block-text-image p {
        margin-top: 0;
        font-size: 1.5rem;
        line-height: 1.2;
        font-family: "Titillium Web", sans-serif;
    }
    
    .block-text-image a {
        font-size: 1rem;
        padding: 0.4rem 2rem 0.5rem;
        border-radius: 0.5rem;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .block-text-image .first-col {
        order: 1;
    }
    
    .block-text-image .second-col {
        order: 2;
    }
    
    .block-text-image {
        margin-bottom: 200px !important;
        margin-top: 200px;
    }
    
    .block-text-image h2 {
        font-size: 4rem;
        line-height: 1.2;
        margin-bottom: 0;
        text-transform: uppercase;
        letter-spacing: 0.2rem;
    }

    .block-text-image.circularcolutions img {
        border-color: #ADBF00;
        height: 560px;
        width: 100%;
        object-fit: cover;
    }

    .block-text-image.bestpractice img {
        border-color: #458933;
        height: 560px;
        width: 100%;
        object-fit: contain;
    }

    .block-text-image.info img {
        border-color: #00603F;
        height: 560px;
        width: 100%;
        object-fit: cover;
    }

    .block-text-image p {
        margin-top: 0;
        font-size: 1.5rem;
        line-height: 1.2;
        font-family: "Titillium Web", sans-serif;
    }
    
    .block-text-image a {
        font-size: 1.5rem;
        padding: 0.4rem 2rem 0.5rem;
        border-radius: 0.5rem;
    }
}

@media (min-width: 1200px) {
    .block-text-image .first-col {
        order: 1;
    }
    
    .block-text-image .second-col {
        order: 2;
    }

    .block-text-image {
        margin-bottom: 200px !important;
        margin-top: 200px;
    }

    .block-text-image h2 {
        font-size: 6rem;
        line-height: 1.2;
        margin-bottom: 0;
        text-transform: uppercase;
        letter-spacing: 0.2rem;
    }

    .block-text-image.circularcolutions img {
        border-color: #ADBF00;
        height: 560px;
        width: 100%;
        object-fit: cover;
    }

    .block-text-image.bestpractice img {
        border-color: #458933;
        height: 560px;
        width: 100%;
        object-fit: contain;
    }

    .block-text-image.info img {
        border-color: #00603F;
        height: 560px;
        width: 100%;
        object-fit: cover;
    }

    .block-text-image p {
        margin-top: 0;
        font-size: 2rem;
        line-height: 1.2;
        font-family: "Titillium Web", sans-serif;
    }
    
    .block-text-image a {
        font-size: 1.5rem;
        padding: 0.4rem 2rem 0.5rem;
        border-radius: 0.5rem;
    }
}

.block-text-image .wp-block-columns {
    align-items: center !important;
}

.block-text-image img {
    border: 2px solid;
    border-radius: 1rem;
    background-color: white;
}

.block-text-image.circularcolutions a {
    background-color: #ADBF00;
    border: 2px solid #ADBF00;
}

.block-text-image.circularcolutions a:hover {
    background-color: white;
    border: 2px solid #ADBF00;
    color: #ADBF00;
}

.block-text-image.bestpractice a {
    background-color: #458933;
    border: 2px solid #458933;
}

.block-text-image.bestpractice a:hover {
    background-color: white;
    border: 2px solid #458933;
    color: #458933;
}

.block-text-image.info a {
    background-color: #00603F;
    border: 2px solid #00603F;
}

.block-text-image.info a:hover {
    background-color: white;
    border: 2px solid #00603F;
    color: #00603F;
}

.block-text-image .ti_content {
    padding-bottom: 2rem;
}