#mainContents
{
    font-size-adjust: 0.7;

    @media (hover: none) and (pointer: coarse)
    {
        font-size-adjust: 0.5;
    }

    @media screen and (max-width: 747px)
    {
        font-size-adjust: unset;
    }
}

#image
{
    display: flex;
    width: 100%;
    max-width: 100%;
    max-height: 500px;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    min-width: 0;

    a
    {
        display: contents;
    }

    figure
    {
        width: 100%;
        height: 100%;
        justify-content: center;
    }

    img
    {
        height: 100%;
        width: auto;
        min-width: 0;
        max-width: 100%;
        display: block;
        border-radius: 3px;
    }
}

#image + .content > section:first-child
{
    margin-top: 1lh;
}

#about
{
    margin-top: 0.5lh;

    div
    {
        justify-content: center;
    }
}

.contacts
{
    flex-wrap: wrap;
    padding: 5px 0 0 0;

    .contact
    {
        display: flex;
        align-items: center;
        margin: 3px;
        /* flex-wrap: wrap; */
    }

    .icon
    {
        --size: 1lh;
        width: var(--size);
        height: var(--size);
        min-width: var(--size);
        min-height: var(--size);
        background-color: var(--c-black);
        mask-size: contain;
        mask-position: center;
        mask-repeat: no-repeat;
    }

    .icon.phone
    {
        mask-image: var(--icon-phone);
    }

    .icon.map
    {
        mask-image: var(--icon-map);
    }

    .icon.fax
    {
        mask-image: var(--icon-fax);
    }

    .icon.mail
    {
        mask-image: var(--icon-mail);
    }

    .icon + span
    {
        margin:0 20px 0 10px;
    }

    .contact.address
    {
        text-decoration: underline;
    }
}

.tableOutline.grid
{
    align-items: center;
    grid-template-columns: max-content auto;
    grid-row-gap: 4px;
    min-width: 0;
    max-width: fit-content;

    .officeName
    {
        grid-area: 1/1/2/-1;
        background-color: #becde0;
        padding: 8px;
        mask: linear-gradient(-45deg,#0000 5.66px,#000 0 calc(100% - 5.66px),#0000 0);
    }

    .label
    {
        padding: 8px;
        margin-right: 5px;
        height: 100%;
        background-color: #dce5ef;
        mask: linear-gradient(-45deg,#0000 5.66px,#000 0 calc(100% - 5.66px),#0000 0);
    }

    .text
    {
        margin-right: 12px;
    }

    .hFull
    {
        padding-top: 8px;
    }
}

li
{
    margin-left: 28px;
}

.images
{
    width: 100%;
    min-width: 0;
    max-width: 100%;

    a
    {
        min-width: 0;
    }

    figure
    {
        width: fit-content;
        min-width: 0;
        margin: auto;
    }

    img
    {
        border-radius: 3px;
        pointer-events: none;
        visibility: hidden;
        position: absolute;
    }
}

.grid.basic
{
    align-items: center;
    grid-template-columns: max-content auto;
    grid-row-gap: 4px;
    min-width: 0;

    .label
    {
        padding: 8px;
        margin-right: 5px;
        height: 100%;
        background-color: color-mix(in srgb, var(--c-black), transparent 94%);
        mask: linear-gradient(-45deg,#0000 5.66px,#000 0 calc(100% - 5.66px),#0000 0);
    }

    .text
    {
        margin-right: 12px;
    }

    .hFull
    {
        padding-top: 8px;
    }
}

.containerTwoColumns
{
    container: two-columns / inline-size;

    .container
    {
        display: flex;
        flex-direction: row;
    }
}