.poppins-medium {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.poppins-semibold {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.poppins-bold {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
}


.pswp__hide-on-close {
    width: 100%;
    text-align: center;
    color: #fafafa;
    position: absolute;
    bottom: 20px;
}

body {
    background-color: #fff;
    color: #3d3d3d;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}



#basket_header {
    padding: 1rem 0 1rem 0;
    border-bottom: 1px solid var(--color-black);

    a {
        display: block;
        width: fit-content;
        margin: 0 auto;

        img {
            max-width: 400px;
            width: 100%;
        }
    }
}


main {
    width: 1050px;
    margin: 0 auto 3rem;
    padding: 2rem 0;
}

h1 {
    font-size: 4rem;
    text-align: left;
    border-left: 1px solid #383939;
    padding-left: 1rem;
    margin-bottom: 4rem;

    span {
        display: block;
        font-size: .8rem
    }
}


h2 {
    font-size: 2rem;
    text-align: left;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
    line-height: 1;
    letter-spacing: 0.05em;
    margin-bottom: 2rem;
    padding: 1rem;
    position: relative;
    background-color: #fff;
    background: linear-gradient(-45deg, #fe7163, #f6c25f);

    border-radius: 10px;

    span {
        font-size: 1rem;
    }

    small {
        font-size: .8rem;
        display:block;
        margin:5px 0;
    }

}


h2:before {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(-45deg, var(--color-eoyellow) -39%, var(--color-eoorange) 80%);
    transform: translate3d(1px, 3px, 0) scale(1);
    filter: blur(3px);
    opacity: var(0.67);
    transition: opacity 0.3s;
    border-radius: inherit;
    width: 100%;
}



#cover {
    img {
        width: 100%;
        height: auto;

    }

    margin-bottom: 5rem;
}

.gallery-design {
    width: 1040px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 5rem;
    gap: 10px;

    li {
        height: 200px;
        width: 200px;
        /*        border: 1px solid #999;*/
        background: #303030;
        border-radius: 5px;

        img {
            object-fit: contain;
            height: 200px;
            width: 200px;
        }

    }

}

#Photographer {
    display: flex;
    gap: 20px;
    margin-bottom: 5rem;

    li {
        width: calc((100% - 40px) / 3);
        display: flex;
        background-color: #f9f3e5;
        padding: 1rem;
        border-radius: 10px;

        img {
            height: 50px;
            width: 50px;
            margin-right: 1rem;
            border-radius: 50%;
        }

        p.PhotographerName {
            font-size: 1.2rem;
            margin-bottom: .5rem;
        }

        p.Photographerschool {
            font-size: .8rem;
            margin-bottom: .5rem;
        }

        p.PhotographerMessage {
            font-size: 1.0rem;
            font-weight: normal;
            margin-bottom: .5rem;
        }


        p.PhotographerCamera {
            font-size: .9rem;
            margin-bottom: .5rem;
        }


    }
}

#gallery-footer {
    margin: 4rem 0 2rem 0;
    ul{
        li{
            line-height: 1.5;
        }
    }
}




@media not screen and (min-width:1200px) {

    main {
        width: 100%;
        padding: 1rem 5px;
    }



    .gallery-design {
        width: 100%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 3rem;
        gap: 10px;

        li {
            height: auto;
            width: calc((100% - 40px) / 4);
            img {
                object-fit: contain;
                max-height: 150px;
                width: 100%;
            }
        }

    }

}


@media not screen and (min-width:900px) {


    h1 {
        font-size: 3rem;
        text-align: left;
        border-left: 1px solid #383939;
        padding-left: 1rem;
        margin-bottom: 2rem;

        span {
            display: block;
            font-size: .8rem
        }
    }


    .gallery-design {
        width: 100%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 3rem;
        gap: 10px;

        li {
            height: auto;
            width: calc((100% - 30px) / 3);
            img {
                object-fit: contain;
                max-height: 150px;
                width: 100%;
            }
        }

    }

}



@media not screen and (min-width: 768px) {

#cover {
    margin-bottom: 2rem;
}

    .gallery-design {
        width: 100%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 2rem;
        gap: 10px;

        li {
            height: auto;
            width: calc((100% - 10px) / 2);

            border-radius: 3px;


            img {
                object-fit: contain;
                max-height: 150px;
                width: 100%;

            }

        }

    }

    h1 {
        font-size: 2rem;
        text-align: left;
        border-left: 1px solid #383939;
        padding-left: 1rem;
        margin-bottom: 2rem;

        span {
            display: block;
            font-size: .8rem
        }
    }


    h2 {
        font-size: 1.5rem;
        letter-spacing: 0.05em;
        margin-bottom: 1rem;

        span {
            font-size: .8rem;
        }

    }



    #Photographer {
        display: block;
        gap: 20px;
        margin-bottom: 1rem;

        li {
            width: 100%;
            display: flex;
            background-color: #f9f3e5;
            padding: 1rem;
            border-radius: 10px;
            margin-bottom: 1rem;

            img {
                height: 50px;
                width: 50px;
                margin-right: 1rem;
                border-radius: 50%;
            }

            p.PhotographerName {
                font-size: 1.2rem;
                margin-bottom: .5rem;
            }

            p.Photographerschool {
                font-size: .8rem
            }
        }
    }


        #gallery-footer {
    margin: 2rem 0 1.5rem 0;}
}