:root {
    --dark-green: #004d40;
    --teal: #00796B;
    --forest-green: #0F4036;
    --medium-green: #2d6a4f;
    --dark-gray: #333;
    --black: #333333;
    --light-green: #45a049;
    --lime-green: #4CAF50;
    --gray: #555555;
    --light-gray: #666;
    --mint: #9EC3BC;
    --pale-green: #afd9ac;
}

body {
    font-family: Arial, sans-serif;
    background-color: var(--teal);
    color: white;
    margin: 0;
    padding: 0;
}

header {
    background-color: var(--mint);
    padding: 20px;
    text-align: center;
}

h1 {
    margin: 0;
    color: black;
}

h1 {
    align-self: center;
    display: flex;
    justify-content: center;
}

.galeri {
    padding: 20px;
    background-color: var(--mint);
    height: fit-content;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Maximum 3 columns */
    grid-auto-rows: 200px; /* Set a fixed height for each row */
    gap: 10px; /* Space between grid items */
    overflow-y: hidden;
    overflow-x: hidden;
    height: fit-content;
}

.media-item {
    position: relative; /* Set relative positioning for the container */
    background-color: var(--medium-green);
    border: 1px solid var(--black);
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.media-item img,
.media-item video {
    width: 100%;
    height: 100%; /* Fill the item height */
    object-fit: cover; /* Maintain aspect ratio */
    border-radius: 10px;
}

.media-item p {
    position: absolute; /* Position the text absolutely */
    bottom: 10px; /* Position it at the bottom of the item */
    left: 10px; /* Position it from the left */
    background-color: #004d4080; /* Semi-transparent background */
    color: white; /* Text color */
    font-weight: bolder;
    padding: 5px; /* Padding around the text */
    border-radius: 5px; /* Rounded corners */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s; /* Smooth transition for opacity */
}

.media-item:hover {
    transform: scale(1.05); /* Slightly scale up on hover */
    box-shadow: #004d4030; /* Darker shadow on hover */
}

.media-item:hover p {
    opacity: 1; /* Show the text on hover */
}