tuning_pictures.css

/* Container for the image grid */
.image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    gap: 20px; /* Space between the images */
    margin-top: 20px;
}

/* Style for each image in the grid */
.image-grid img {
    width: 100%; /* Make the images fill their grid cells */
    height: 250px; /* Set a fixed height to crop the images */
    object-fit: cover; /* Crop the image, maintaining its aspect ratio */
    border-radius: 8px; /* Optional: Add rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Add shadow for effect */
    transition: transform 0.4s ease, box-shadow 0.4s ease; /* Smooth transition */
}

/* Zoom-out effect on hover */
.image-grid img:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    border: 1px solid red;
}

.image-grid-frontpage {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    gap: 10px; /* 10px space between the images */
    align-items: center; /* Center items vertically */
    margin: 200px auto; /* Center the grid with a top margin */
    margin-bottom: 30px;
    max-width: 80%; /* Set a max-width to control the grid width */
}

.image-container {
    position: relative;
    overflow: hidden; /* Ensures the image stays within its boundaries */
    border-radius: 8px; /* Optional: Add rounded corners */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5); /* Optional: Add shadow for effect */
    width: 100%; /* Container width */
    padding-top: 28.88%; /* Aspect ratio for 374x108 (108/374 * 100) */
}

.image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensure the image fits inside the container without cropping */
    transition: transform 0.4s ease, box-shadow 0.4s ease; /* Smooth transition */
}

.image-container img:hover {
    transform: scale(1.1); /* Scale the image */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Change shadow on hover */
}

.section-frontpage {
    color:black;
    width: 80%; /* Set the width to 60% */
    margin: 0 auto; /* Center the section horizontally */
    margin-bottom: 10px;
    padding: 20px 0; /* Optional: Add some vertical padding */
    text-align: center; /* Center the text and iframe */
}

.section-frontpage p {
    font-size: 1.2em; /* Optional: Adjust font size */
    line-height: 1.5; /* Optional: Improve readability */
}

.section-frontpage iframe {
    width: 100%; /* Ensure iframe takes full width of the container */
    height: auto; /* Adjust height automatically */
    border: 0; /* Remove default iframe border */
}

.container-frontpage {
    max-width: 80%;
    margin: 500px auto;
    padding: 20px;
    position: relative; /* Ensure it stacks below the menu */
    z-index: 1; /* Ensure the container is below the menu */
}