.trip-result-card {
    position: relative;
    overflow: hidden;
}

.trip-result-grid {
    display: grid;
    gap: 0 0.9rem;
    align-items: start;
}

.trip-result-grid {
    grid-template-columns: 1fr 0.6fr;
    grid-template-areas:
        "busType total-price"
        "route price"
        "depart depart"
        "arrive arrive"
        "duration action";
}

/* Grid Areas */

.bus-type-area {
    grid-area: busType;
}

.route-area {
    grid-area: route;
}

.depart-area {
    grid-area: depart;
}

.arrive-area {
    grid-area: arrive;
}

.duration-area {
    grid-area: duration;
}
.total-price-area {
    grid-area: total-price;
    text-align: right;
}


.price-area {
    grid-area: price;
    text-align: right;
}

.total-amount {
    font-weight: 600;
}

.action-area {
    grid-area: action;
    text-align: right;
    align-self: end;
}
.fs-lg {
    font-size: 1rem;
}

.fs-md {
    font-size: 0.875;
}
.fs-sm {
    font-size: 0.75rem;
}

.fs-xs {
    font-size: 0.625rem;
}
.custom_font {
    font-size: 0.875rem;
}

.right-mb-ribbon {
    bottom: 12%;
}

@media (min-width: 768px) {

    .trip-result-grid {
        grid-template-columns:auto 270px 280px;
        grid-template-areas:
            "busType duration total-price"
            "route duration price"
            "depart duration price"
            "arrive duration action";

        align-items: start;
    }

    .duration-area {
        display: flex;
        height: 100%;
    }

    .custom_font {
         font-size: 1.1rem;
     }

     .fs-lg {
         font-size: 1.2rem;
     }

     .fs-md {
         font-size: 1.1rem;
     }
     .fs-sm {
         font-size: 1rem;
     }
     .right-mb-ribbon {
          display: none;
     }

     .ribbon11 {
         display: none;
     }

     .ribbon11-sec {
        display: none;
     }
}