.recipes {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.recipes .recipes-cta {
    margin-top: 40px;
}

.recipes .recipes-cta a{
    padding: 16px 20px; 
    font-weight: 600;
    line-height: 114.9999999999999%;
    font-size: 16px;
}

.recipes h2 {
    color: var(--dark-blue);
    text-align: center;
    font-size: 2rem;
    line-height: 37px;
    margin-bottom: 20px;
    font-family: "Mitr Bold", "sans-serif";
    font-weight: 700;
}

.recipes .recipe-container {
    display: flex;
    gap: 1.25rem;
    flex-direction: column;
}


.recipes .recipe-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 150px;
    gap: 1.875rem;
    justify-content: center;
    padding: 0.938rem 1.25rem 1.563rem 1.25rem;
    > h3 {
        color:var(--dark-blue);
        text-align: center;
        margin: 0;
        font-family: "Mitr Bold", "sans-serif";
        font-weight: 700;
    }
    > .recipe-detail {
        color:var(--dark-blue);
        font-size: 1rem;
        display: flex;
        gap: 20px;
        > span {
            display: flex;
            flex-direction: row;
            gap: 0.625rem;
            > .recipe-logo {
                width: 1.25rem;
                height: 1.25rem;
            }
        }
    }
    > .cta {

        line-height: 114.99999999999999%;
        padding: 1rem 1.25rem;
        font-weight: 600;
        font-size: 1rem;
            
    }
    > .cta:hover{
        border-color: var(--blue);
    }
}

@media screen and (min-width: 48rem) {
    .recipes {
        display: flex;
        flex-direction: column;
        gap: 50px;
    }
    .recipes h2 {
        margin-bottom: 0;
    }

 }
 @media screen and (min-width: 64rem) {
    .recipes .recipe-container {
        flex-direction: row;
    }

    .recipes .recipes-cta {
        margin-top: 0;
    }

    .recipes .recipe-container .recipe:nth-of-type(2){
        top: 50px;
        margin-bottom: 30px;
    }
 }