/*CSS document*/

div.container {
    max-width: 60em;
    margin: 2rem;
}

section {
    max-width: 60em;
    
}

section.secondary {
    padding-bottom: 0;
}

figure {
    margin: 0;
}

img {
    width: 100%;
}

ul {
    list-style-type: none;
    padding: 0 .6rem;
    text-decoration: none;
}

li {
    display: inline;
    padding: 0 1rem 0 0;
    margin: auto;
    font-family: adobe-caslon-pro, serif;
    font-weight: 500;
    font-style: normal;
    font-size: 1rem;
    letter-spacing: 0.03rem;
  
}

a {
    text-decoration: none;
    color:#222;
}

a:hover {
    color: #824376;
}

h2 {
    font-family: adobe-caslon-pro, serif;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0.03rem;
    margin: 1rem 0 0 0;
}

aside {
    background-color: #7e8658;
    padding: 1em;
    margin-bottom: 1em;
    height: fit-content;
}

figcaption {
    font-family: mrs-eaves-roman-lining, serif;
    font-weight: 400;
    font-style: italic;
    font-size: 1.1em;
    color: #173012;
    margin: 0 0 1rem 0;
}

h3 {
    font-family: adobe-caslon-pro, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.2rem;
    margin: 0.25rem 0 0 0;
    line-height: 1.75rem;
    color:#7e8658;
}

section.tertiary h3 {
    color: #FFF;
}

h2.related {
    color: #FFF;
    font-style: italic;
}

h3.related {
    color: #FFF;
    
}

p {
    font-family: mrs-eaves-roman-lining, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.1em;
    color: #173012;
    margin: 0 0 2rem 0;
}

img.logo {
    width: 20em;
    padding: 0;
    margin: 0;
}

p.footer {
    background-color: #824376;
    color: #f2efe6;
    padding: 1rem;
}

/* main story css*/

div.mainContainer {
    max-width: 40em;
}


section.mainStory figure {
    margin: 0;
}

aside.related {
    margin-bottom: 1rem;
}

h2.related {
    margin: auto;
    font-weight: 500;
}

h3.related {
    font-size: 1rem;
}

/* photogallery css*/

div.gallery {
    max-width: 60em;
    margin: auto;
}

div.gallery main {
    position: relative;
    overflow: hidden;
    padding-bottom: calc(67% + 3em);
}

div.gallery figure {
    width: 100%;
    position: absolute;
    opacity: 0;
    transition: .5s;
    
}

div.gallery figcaption {
    font-size: 1.2em;
    color: #222;
}

input:nth-of-type(1):checked ~ main figure:nth-of-type(1),
input:nth-of-type(2):checked ~ main figure:nth-of-type(2),
input:nth-of-type(3):checked ~ main figure:nth-of-type(3),
input:nth-of-type(4):checked ~ main figure:nth-of-type(4),
input:nth-of-type(5):checked ~ main figure:nth-of-type(5),
input:nth-of-type(6):checked ~ main figure:nth-of-type(6),
input:nth-of-type(7):checked ~ main figure:nth-of-type(7),
input:nth-of-type(8):checked ~ main figure:nth-of-type(8),
input:nth-of-type(9):checked ~ main figure:nth-of-type(9) 
{
    left: 0;
    opacity: 1;
    
}

div.gallery nav.label {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-gap: 0.2em;
}

div.gallery input {
    display: none;
}

/*newsletter*/

div.newsletter input.formStyle {
        background-color:#f2efe6;
        width: 30em;
        display: block;
        padding: 1.2em;
        margin-bottom: 1.2em;
        border-top-style: none;
        border-right-style: none;
        border-left-style: none;
        border-bottom-style: double;
        font-family: mrs-eaves-roman-lining, serif;
        font-weight: 500;
        font-size: 1rem;    
    }

    div.newsletter li.selection {
        display: block;
        padding: 1em;
    }

    div.newsletter h4 {
        font-family: mrs-eaves-roman-lining, serif;
        font-size: 1.5rem;
        font-weight: 400;
        font-style: italic;
    }

    div.newsletter button {
        background-color: #7e8658;
        color: #f2efe6;
        font-family: mrs-eaves-roman-lining, serif;
        padding: 1rem;
        margin: 2rem 1rem;
        border-style: none;
        border-radius: 1rem;
        text-transform: uppercase;
        
    }

    div.newsletter footer {
        margin-top: 3rem;
    }

@media screen and (min-width: 60em) {
    div.container {
        max-width: 80em;
        display: grid;
        grid-template-columns: 3fr 1fr;
        grid-gap: 0 1rem;
    }
    
    header {
        grid-column: 1/3;
    }
    
    main {
        grid-column: 1/2;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 1rem;
    }
    
    article.main {
        width: 50rem;
    }
    
    section.mainStory {
        grid-column: 2/4;
        grid-row: 1/3;
        display: flex;
        flex-direction: column;
    }

    
    section.mainStory figure {
        flex: 1 0 18em;
        display: flex;
        flex-direction: column;
        
    }
    
    section.mainStory figure div{
        flex: 1 0 18em;
        background-image: url(herbalMedicine.jpeg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        
    }
    
    section.mainStory figure div img{
        height: 100%;
        opacity: 0;
    }
    
    
    section.mainStory h3 {
        flex: 0 0 auto;
        margin: 0;
    }
    
    section.mainStory p {
        flex: 0 0 auto;
        margin: 0;
    }
    
    article {
        grid-column: 1/2;
    }
    
    aside {
        grid-column: 2/3;
    }
    
    
    footer {
        grid-column: 1/3;
    }
    
    div.newsletter {
        max-width: 50em;
    }
    
    div.newsletter main {
        display: block;
    }
    
    div.newsletter img.newsletter {
        width: 50em;
    }

    
}