@font-face {
    font-family: "regularfont";
    src: url(InstrumentSans-Regular.otf);
}

@font-face {
    font-family: "boldbaddiefont";
    src: url(InstrumentSans-Bold.otf);
}

/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body Styling */
body {
    font-family: "regularfont", "boldbaddiefont";
    background-color: #e0e0e0; /* Grey background */
    display: flex;
    justify-content: center;  /* Horizontally center the content */
    align-items: center;      /* Vertically center the content */
    min-height: 100vh;        /* Ensure the body takes the full height of the viewport */
    padding: 20px;
}

/* Shop Container */
.shop-container {
    text-align: center;
    width: 100%;   /* Allow it to take the full width */
    max-width: 1200px;  /* Max width to prevent stretching too wide */
}

/* Heading Section */
.heading-container {
    margin-bottom: 20px;
}

.heading-container h1 {
    font-family: "boldbaddiefont";
    font-size: 3rem;
    color: #333;
}

.heading-container h2 {
    font-family: "regularfont", sans-serif;
    font-size: 1.5rem;
    color: #666;
    margin-top: -10px;
}

/* Shop Section */
.shop-section h1 {
    font-family: "boldbaddiefont", sans-serif;
    font-size: 2.5rem;
    margin-top: 30px;
    margin-bottom: 20px;
}

/* Image Container (Grid Layout) */
.image-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
    gap: 10px;
    margin-top: 40px;
    background-color: transparent; /* Ensure no background color */
    justify-items: center; /* Center the images inside their grid cells */
}

/* Style for Images */
.image-container img {
    max-width: 400%;   /* Use max width of the container */
    max-height: 300px; /* Set a max height */
    width: auto;       /* Maintain aspect ratio */
    height: auto;      /* Maintain aspect ratio */
    object-fit: contain; /* Maintain image's aspect ratio and fit within max width/height */
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: transparent; /* Ensure no background color behind images */
}

/* Hover Effect for Images */
.image-container img:hover {
    transform: scale(1.05);
}

/* Responsive Layout */
@media (max-width: 768px) {
    .image-container {
        grid-template-columns: repeat(2, 1fr); /* Two images per row on smaller screens */
    }
}

@media (max-width: 480px) {
    .image-container {
        grid-template-columns: 1fr; /* One image per row on very small screens */
    }
}