.top-card {
    /* Replace with individual border widths: this can be used to utilise frames that have asymetrical border sizes. this is all set even tho. */
    border-top: 30px solid;
    border-right: 30px solid; 
    border-bottom: 30px solid;
    border-left: 30px solid;
    border-image-source: url(images/sml-wood-frame.webp);
    border-image-slice: 30 30 30 30;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    
    
    box-shadow: 0 4px 6px rgba(12, 12, 12, 0.774);
    /* We add position: relative so we can position the background inside it */
    position: relative;
    overflow: hidden; /* This keeps the background image from spilling out */
    z-index: 3;
}


/* Use ::after pseudo-element for the true background (behind everything) */
.top-card::after {
    content: '';
    position: absolute;
    /* Extend even further behind the entire polaroid including frame */
    top: -40px;
    left: -40px;
    right: -40px;
    bottom: -40px;
    width: calc(100% + 80px);
    height: calc(100% + 80px);
    /*background-image: url('images/wood-sign.webp');*/
    opacity: 0.6;
    border-radius: 12px; /* Optional: rounded corners for the true background */
    z-index: -2;
    
}    


/* This container ensures your text and other content sits above the background. */
.top-card-content {
    position: relative;
    width: 100%;
    height: 100%;
    margin-bottom: -5px;
    object-fit: cover;
    object-position: center;
    /* Add some padding to ensure content doesn't touch the edges */
    padding: 0rem;
    background: rgba(48, 48, 48, 0); /* Semi-transparent background for better readability */
    border-radius: 8px;
    z-index: 4;
}


.topcrd-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin-left: auto;
    margin-right: auto;
}


@media (max-width: 768px) {


.top-card {
   border-image-source: url(images/sml-wood-frame-sml.webp); 
   border-top: 20px solid;
    border-right: 20px solid; 
    border-bottom: 20px solid;
    border-left: 20px solid;
    border-image-slice: 20 20 20 20;
   
}    
}