h1 {
    margin-bottom: 0.5rem;
}

.catalogue {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 20px; /* Add some padding for the outer container */
}

.product {
    position: relative;
    cursor: pointer;
    text-align: center;
    background: #050505;
    /* border: 2px solid var(--turquoise); */
    border-radius: 32px;
    overflow: hidden;
}

.product h2 {
    background-color: #050505;
    color: #ffffff;
    padding: 1.2rem 0 30px 0;
    font-size: xx-large;
    justify-self: center;
    width: fit-content;
    margin: 0; /* Remove default margin */
}

.product h2:before {
       content: "";
    position: absolute;
    max-width: 100%;
    bottom: 18px;

    width: 100%;
    background: #292622;
    left: 0;
    height: 5.1px;
}
.image-container {
    position: relative;
    padding: 1rem;
}

.image-container img {
    width: 100%;
    height: auto;
    border-radius: 2rem;
    object-fit: cover;
    display: block; /* Ensures the image does not have extra space below */
    border: 2px solid var(--turquoise);

}

.product .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.463);
    color: #e2e2e2;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s;
}

.product:hover .overlay {
    opacity: 1;
}

.customoverlay {
    padding: 1rem;
    border-radius: 100%;
    background: #000000;
    height: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 5rem;
    color: var(--turquoise);
    border: 2px solid var(--turquoise);
}

@media (max-width: 768px) {
    .catalogue {
        padding: 10px; /* Reduce padding on smaller screens */
    }

    .product h2 {
        font-size: large; /* Smaller font size for smaller screens */
    }
}