/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Blockquote

# Sections

# Media Queries
--------------------------------------------------------------*/


/* Blockquoute
--------------------------------------------- */
.quote {
    background-color: #FDF9F0;
    margin: 0;
    gap: 0;
}

.quote p {
    grid-column: 1 / 3;
    z-index: 5;
}

.quote p:first-of-type {
    font-size: 1.2rem;
    font-weight: 700;
}


@media (min-width: 50em) {
.quote {
    padding: 2rem 1rem 1rem;
}

    .quote p {
        grid-column: 3 / 5;
    }
}


/* Sections
--------------------------------------------- */
#main-content,
#nature-landscapes,
#nature-waterscapes,
#nature-wildlife,
#nature-marinelife {
    scroll-margin-top: 6rem;
}

/* Page Heading */
.nature-wrapper h2 {
    color: #FDF9F0;
    background-color: #1f4d3a;
    z-index: 1;
}

/* Nature Sub-menu */
.nature-menu {
    margin: 2rem;
}

.nature-menu h3 {
    font-size: 1rem;
}

.nature-menu a {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: .75rem;
    line-height: 1.2;
}

.nature-menu-link img {
    width: 8rem;
    height: 8rem;
    object-fit: contain;
    padding: 1rem;
}

/* Nature Content */
.nature-content figure {
    grid-column: 1 / 3;
    text-align: left;
    margin: 1rem 0;
}

.nature-content h3, 
.nature-content span {
    margin: .5rem 0;
}

/* Media Queries */

@media (min-width: 50em) {

    .nature-wrapper h2 {
        padding:7rem;
    }

    .nature-menu {
        margin: 4rem;
    }

    .nature-menu a:first-of-type {
		grid-column: 2 / 3;
	}

    .nature-content figure {
        margin: 0;
    }

    /* Column Placement */
    .nature-content .left {
        grid-column: 2 / 4;
    }

    .nature-content .right {
        grid-column: 4 / 6;
    }

    /* Row Placement */
    .nature-content .chocolate-hills {
        grid-row: 1 / 2;
    }

    .nature-content .panglao {
        grid-row: 3 / 4;
    }

    .nature-content .falls {
        grid-row: 5 / 6;
    }

    .nature-content .marine {
        grid-row: 7 / 8;
    }
}