.body
{
    padding: var(--gap) 0;

    align-items: center;
}

.section
{
    width: 80vw;
    height: fit-content;

    display: flex;
    flex-direction: column;

    gap: calc(2.5 * var(--gap));
}

.homepage_banner
{
    width: 100%;
    aspect-ratio: 16 / 9;

    background-color: var(--color-background-black);
    border-radius: calc(2 * var(--border-radius));
}

.productDisplay
{
    display: flex;
    flex-direction: column;
    gap: calc(2.5 * var(--gap));
    
    height: fit-content;
}

.productDisplay .frame.container
{
    border-radius: calc(2 * var(--border-radius));
}

.productInformation
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: var(--gap);

    width: 100%;
    height: fit-content;
}

.productInformation_row
{
    width: 100%;
    height: fit-content;

    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.productInformation_row.grid
{
    height: fit-content;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: calc(var(--padding));
}

.productInformation_rowEntry
{
    width: calc(100% - 2 * var(--padding));
    height: fit-content;
    
    display: flex;

    gap: var(--padding);

    background-color: var(--color-background-preview);
    border-radius: var(--border-radius);
}

.productInformation_rowEntry_description
{
    width: 100%;
    min-height: 3.8rem;
}

.productInformation_rowEntry.list
{    
    flex-direction: row;
    gap: var(--gap);
    padding: var(--padding);
    background: none;
}

.productInformation_rowEntry.grid
{
    gap: var(--padding);
}

.productInformation_label
{
    color: var(--color-text);
    font-size: var(--font-small);
}

/* Tablet (>= 768px) */
@media (min-width: 768px)
{
    .productInformation { flex-direction: row; }
    
    .productInformation_row { width: 70%; }
    .productInformation_row.grid
    {
        max-width: 30%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: calc(var(--gap));
    }
}

/* Desktop (>= 1440px) */
@media (min-width: 1440px)
{
    .productDisplay
    {
        display: grid;
        grid-template-columns: 1fr 1fr;

        height: fit-content;
    }
}