/**** recipe sticky ****/
section.recipe-sticky {
    /* position */
    position: fixed;
    top: 52px;
    z-index: 997;

    /* sizing */
    width: 100%;
    height: max-content;

    /* transform */
    transform: translateY(-100%);
    opacity: 0;

    /* transition*/
    transition: transform var(--transition-duration) var(--transition-method), opacity var(--transition-duration) var(--transition-method);
}

section.recipe-sticky.scrolled {
    /* transform */
    transform: translateY(0%);
    opacity: 1;
}

section.recipe-sticky * {
    /* spacing */
    margin: 0;

    /* text */
    color: var(--brand-text-color);
}

section.recipe-sticky .container {
    /* sizing */
    width: 100%;
    height: max-content;

    /* spacing */
    padding: var(--header-width);

    /* flex */
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    /* styling */
    background-color: var(--brand-color-background);
}

@media (max-width: 650px) {
    section.recipe-sticky .container {
        /* flex */
        flex-direction: column;
        justify-content: left;
    }

    section.recipe-sticky .headers h2 {
        /* text */
        text-align: left;
    }

    section.recipe-sticky .info {
        /* flex */
        justify-content: left !important;
    }

    section.recipe-sticky .info .part {
        /* flex */
        justify-content: left !important;

        /* text */
        text-align: left !important;
    }
}

section.recipe-sticky .headers {
    /* flex */
    display: flex;
    flex-direction: column;
}

section.recipe-sticky .info {
    /* flex */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 20px;
}

section.recipe-sticky .info .part {
    /* flex */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    /* text */
    text-align: right;
}