.paragraph--type--inner-multi-column-content-v2::before {
    background: url(../../images/ribbon.png) no-repeat;
    content: " ";
    display: block;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
}

.column-item-content {
    background: #f4f4f4;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.column-item-content::before {
    content: " ";
    display: block;
    padding-bottom: 120%;
}

.column-item-content .image {
    height: 100%;
    left: 0;
    top: 0;
    transition: all 0.5s ease;
    width: 100%;
}

.column-item-content .image::after {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 60%);
    bottom: 0;
    content: " ";
    display: block;
    height: 50%;
    left: 0;
    position: absolute;
    width: 100%;
}

.column-item-content .title {
    bottom: 45px;
    left: 0;
    text-align: center;
    transition: all 0.8s ease;
    width: 100%;
}

.column-item-content .content {
    background: linear-gradient(180deg, var(--petronas-green), var(--petronas-purple));
    bottom: 0;
    transform: translateY(100%);
    left: 0;
    padding: 40px 25px 10px;
    text-align: center;
    transition: all 0.8s ease;
    width: 100%;
}

.column-item-content:hover .image {
    height: 75%;
}

.column-item-content:hover .content {
    transform: translateY(0);
}

@media only screen and (min-width: 768px) {
    .paragraph--type--inner-multi-column-content-v2::before {
        background-position: left -140px bottom;
        background-size: 2500px auto;
        bottom: 0;
        transform: rotate(180deg);
    }
}

@media only screen and (max-width: 767px) {
    .paragraph--type--inner-multi-column-content-v2 {
        margin-top: -80px;
        padding-top: 120px;
    }

    .paragraph--type--inner-multi-column-content-v2::before {
        background-size: calc(100vw + 280px) auto;
        height: 300px;
        transform: scaleX(-1) scaleY(-1) rotate(20deg);
        top: -25px;
        left: -30px;
        width: calc(100% + 200px);
        background-position: left 40px bottom;
    }

    .paragraph--type--inner-multi-column-content-v2 .content {
        z-index: 2;
    }

    .column-item-content .image {
        height: 75%;
    }

    .column-item-content .content {
        padding: 25px;
        transform: translateY(0);
    }
}