/* Smykke header */

#smykke-header {
    max-width: 1500px;
    margin: 7em auto 0;
    background-color: #212529;
    padding: 7em 0 1em;
}

#smykke-header h1 {
    color: #D3AC2B;
    font-size: 3.5rem;
    font-weight: 600;
    margin: 0;
    text-align: center;
}

#smykke-header hr {
    margin: 1em auto 0;
    text-align: center;
}


/* Smykke galleri */

#smykke-galleri {
    max-width: 1500px;
    margin: 0 auto;
    background-color: #212529;
    padding: 7em 145px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#smykke-galleri>article {
    width: 363px;
    height: 484px;
    margin-bottom: 4em;
    border-radius: .6em;
    position: relative;
    overflow: hidden;
}

#smykke-galleri>article img {
    width: 100%;
    height: auto;
    border-radius: .6em;
    position: relative;
}

#smykke-galleri>article section.description {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 0em;
    background-color: #212529e3;
    border-radius: .6em;
    transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    color: #EAEAEA;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
}

#smykke-galleri>article:hover .description {
    height: 13em;
    opacity: 1;
}

#smykke-galleri>article section.description h2 {
    font-size: 2rem;
    font-weight: 600;
    margin: 0;
    color: #D3AC2B;
}

#smykke-galleri>article section.description article p {
    font-size: 1.1rem;
    margin: 1em 0;
}

#smykke-galleri>article section.description>p {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
}

@media screen and (max-width: 1024px) {
    /* Smykke galelri */
    #smykke-galleri {
        padding: 7em 6em 0;
    }
    #smykke-header h1 {
        font-size: 2.5rem;
    }
    #smykke-galleri>article {
        width: 230px;
        height: 430px;
        margin: 0 auto 4em;
    }
    #smykke-galleri>article img {
        z-index: 90;
    }
    #smykke-galleri>article section.description {
        z-index: 100;
        box-shadow: 0px -5px 10px -1px #000;
        height: 9em;
        background-color: #494949;
        justify-content: space-between;
        transition: none;
        opacity: 1;
        padding: 0.4em 0.4em;
    }
    #smykke-galleri>article:hover .description {
        height: 9em;
    }
    #smykke-galleri>article section.description h2 {
        font-size: 1.5rem;
    }
    #smykke-galleri>article section.description article p {
        font-size: 0.9rem;
        margin: 0.5em 0;
    }
    #smykke-galleri>article section.description>p {
        font-size: 1.2rem;
    }
}

@media screen and (max-width: 940px) {
    /* Smykke galelri */
    #smykke-galleri {
        padding: 7em 0.5em 0;
    }
}

@media screen and (max-width: 440px) {
    #smykke-galleri>article {
        height: 400px;
    }
    #smykke-galleri>article section.description {
        height: 17em;
    }
    #smykke-galleri>article:hover .description {
        height: 17em;
    }
    #smykke-galleri>article section.description article p {
        font-size: 1rem;
    }
}

@media screen and (max-width: 320px) {
    #smykke-galleri>article {
        height: 450px;
    }
}