@import url("./common.css");

/* Product */
.p-grid
{
    display: grid;
    grid-template-areas: 
        'p-name p-name'
        'p-image p-info'
        'p-detail p-detail'
        'p-video p-video'
    ;
    grid-row-gap: 4rem;
    background-color: var(--background-secondary);
    padding: 2rem;
    box-shadow: 2px 2px 8px #111;
    border-radius: 4px;
}

.p-grid > div > h2
{
    margin-bottom: 2rem;
}

.p-name
{
    grid-area: p-name;
}

.p-image
{
    grid-area: p-image;
}
.p-image img
{
    display: block;
    margin: auto;
}

.p-info
{
    grid-area: p-info;
}
.p-detail
{
    grid-area: p-detail;
}

@media screen and (max-width: 768px)
{
    .p-grid
    {
        grid-template-areas: 
        'p-name'
        'p-image'
        'p-info'
        'p-detail'
    ;
    }
}