/*
Theme Name: astra child
Template: astra
Text Domain: my-astra-child
*/

/*@import url("../astra/style.css");
@import url("css/adventures.css");
@import url("css/carousel.css");
@import url("css/responsive.css");
@import url("css/tabs.css");
@import url("css/media-gallery.css");*/

:root {
    --primary-color: #567b68;
    --text-color: #333;
    --background-color: #fff;
    --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --hover-box-shadow: 0 12px 16px rgba(0, 0, 0, 0.2);
}

body, html {
    margin: 0;
    padding: 0;
}

.wrapper {
    width: 100%;
}

.adventure-content {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    text-align: left;
}

/* Hero Image Section */
.hero {
    width: 100%;
    height: 80vh;
    position: relative;
    overflow: hidden;
    margin: 0;
}

/* Ensuring the image fills the full width */
.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

/* Main Content Section */
.adventure-content {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    text-align: left;
}

/* Adventure Container - Boxed Layout */
.adventure-container {
    width: 100%;
    margin-top: 2rem;
}

/*Styles for Our Story Page Image Gallery*/
.custom-gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    grid-template-rows: auto; /* Adjust row height to fit content */
    gap: 15px;
}

.custom-gallery-item img {
    width: 100%;
    height: auto; /* Ensure images keep their aspect ratio */
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.custom-gallery-item-large {
    grid-column: span 2; /* Large image spans both columns */
    grid-row: span 2; /* Optionally, make the large image span two rows */
}

.custom-gallery-item-small {
    grid-row: span 1;
    grid-column: span 1;
}

@media (max-width: 768px) {
    .custom-gallery-grid {
        grid-template-columns: 1fr; /* Single column on smaller screens */
        grid-auto-rows: auto;
    }

    .custom-gallery-item-large {
        grid-row: span 1; /* Adjust large image for mobile */
        grid-column: span 1;
    }
}