@media (min-width: 1024px) {
    .main-container {
        max-width: 1140px;
    }

    .top-grid {
        display: grid;
        grid-template-columns: 1fr 0.9fr;
    }

    .heading-col {
        width: 430px;
        flex-direction: column;
        text-align: left;
        gap: 20px;
    }

    .heading-col h1 {
        margin: 0;
        font-size: 50px;
    }

    .heading-col p {
        margin: 0; 
        line-height: 30px;
        font-size: 23px;
    }

    .rate {
        width: 400px;
        height: 80px;
        flex-direction: row;
    }

    #rate-1, #card-1 {
        align-self: flex-start;
    }

    #rate-2, #card-2 {
        align-self: center;
    }

    #rate-3, #card-3 {
        align-self: flex-end;
    }

    .bottom-grid {
        height: 410px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 20px;
    }


}