.top{
font-size:20px; position:absolute; top: 0; left: 0;
}

.setup {
width: 100%;
display: flex;
flex-wrap:wrap;
justify-content: center;
}

.description{
float: left;
flex-wrap:wrap;
justify-content: center;
font-weight: bold;

border: 1px solid #d9d9d9;
border-radius:5%;


padding: 5px;
margin: 10px;

width: 350px;
height: 410px;
font-size: 15px;
}
img {
border-radius:5%;
}
a { text-decoration: none; }

.search {
position: absolute;
top: 1px;
right: 5px;
}

/* 1. The Container */
.image-container {
position: relative; /* Essential: This makes the container the reference point */
/* Set a fixed width or use max-width */
display: inline-block; /* Shrinks container to fit the image width */
}

/* 2. The Base Image (JPG) */
.base-image {
width: 100%;       /* Makes the image fill the container */
height: auto;      /* Maintains aspect ratio */
display: block;    /* Removes bottom spacing often seen with inline images */
}

/* 3. The Overlay (GIF) */
.overlay-gif {
position: absolute; /* Takes the element out of flow to layer it */
top: 0;             /* Positions it at the top of the container */
right: 0;            /* Positions it at the left of the container */
width: 55px;       /* Adjust size of the GIF */
height: auto;
z-index: 10;        /* Ensures it sits on top (higher number = higher priority) */

/* Optional: Center the GIF  top: 50%;
left: 50%;
transform: translate(-50%, -50%);
*/
}

.textcontainer {
position: relative;
width: 100%; /* Or whatever size you need */
}

/* The image itself */
.image {
display: block;
width: 90%;
height: auto;
}

/* The text overlay */
.bottom-text {
position: absolute;
font-size: 20px;
top: 0;
left: 0;
right: 0;

text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px  1px 0 #000,
1px  1px 0 #000;

color: white;
padding: 10px;
text-align: center;
}