/* Style for the Recipe Grid */
.recipe-grid {
    display: none; /* Hide by default */
    flex-wrap: wrap; /* Allow wrapping of items */
    gap: 20px; /* Space between items */
    margin-top: 45px;
}

.recipe-grid-item {
    width: calc(50% - 10px); /* 2 columns, with gap between */
    background-color: #f4f4f4;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    position: relative; /* Ensure the link wraps the whole item */
}

.recipe-grid-item a {
    display: block; /* Make the entire item clickable */
    height: 100%; /* Full height of the item */
    width: 100%; /* Full width of the item */
    text-decoration: none; /* Remove link underlining */
}

/* Image container with fixed height */
.recipe-grid-image {
    width: 100%; /* Full width of the container */
    height: 150px; /* Fixed height for the image */
    overflow: hidden; /* Ensure the image is cropped if it's larger than the container */
    position: relative; /* Ensure the image is positioned correctly */
}

/* Image style */
.recipe-grid-image img {
    width: 100%; /* Ensure the image stretches to full width */
    height: 100%; /* Force the image to fill the container height */
    object-fit: cover; /* Crop the image while maintaining aspect ratio */
    position: absolute; /* Ensure the image fills the container */
    top: 0;
    left: 0;
}

/* Shake animation */
@keyframes shake {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-5px);
    }
    50% {
        transform: translateX(5px);
    }
    75% {
        transform: translateX(-5px);
    }
    100% {
        transform: translateX(0);
    }
}



/* Recipe Title and Category Style */
.recipe-grid-item h3 {
    font-size: 1.2em;
}

.recipe-category {
    font-size: 0.7em !important;
    color: #555;
    margin-bottom: 20px;
    margin-top: -12px !important;
}

/* Show the grid only on mobile screens (max-width: 767px) */
@media screen and (max-width: 767px) {
    .recipe-grid {
        display: flex;
        justify-content: space-between; /* Make sure the items are spaced correctly */
        margin-top: 45px;
    }

    .recipe-grid-item {
        width: calc(50% - 10px); /* Two columns */
    }

    .recipe-grid-image img {
        object-fit: cover; /* Ensure the image covers the container */
        object-position: center center; /* Position the center of the image at the center of the container */
        width: 100%;
        height: 150px !important; /* Ensure the image stretches to fill the container */
    }

    .recipe-grid-item h3 {
        font-size: 1.2em;
        line-height: normal;
        margin-top: 10px;
    }
}

.favorite-label {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #e4990d;
    color: white;
    padding: 2px 3px;
    font-weight: bold;
    border-radius: 5px;
    z-index: 10; /* Ensure the label appears above the image */
    animation: shake 17s ease-in-out infinite; /* Apply the shake animation */
    font-size:13px;
}