@layer components {
    .site-dialog {
        border: none;
        border-radius: calc(var(--default-border-radius) * 2);
        box-shadow: 0 10px 30px #0003;
        max-width: 95dvw;
        width: min(500px, 45dvw);
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 1;
        visibility: visible;
        transition-property: opacity, transform, visibility, overlay, display;
        transition-duration: .3s;
        transition-timing-function: ease-in-out;
        transition-behavior: allow-discrete
    }

    .site-dialog .dialog-content-section {
        padding-block: var(--gap-m);
        padding-inline: var(--gap-l);
        text-align: center;
        position: relative
    }

    .site-dialog .close-dialog-btn {
        aspect-ratio: 1;
        --font-size: var(--font-size-lg);
        width: var(--font-size);
        height: var(--font-size);
        position: absolute;
        top: calc(var(--gap-m) / 2);
        right: calc(var(--gap-l) / 2);
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        --text-color: var(--text-dark-gray-color);
        color: var(--text-color)
    }

    .site-dialog .close-dialog-btn svg {
        width: 100%;
        height: 100%;
        display: block
    }

    .site-dialog .close-dialog-btn:hover {
        --text-color: var(--color-dark)
    }

    @starting-style {
        .site-dialog[open] {
            opacity: 0;
            transform: translate(-50%, -45%) scale(.95);
            visibility: hidden
        }
    }.site-dialog:not([open]) {
         opacity: 0;
         transform: translate(-50%, -45%) scale(.95);
         visibility: hidden
     }

    .site-dialog::backdrop {
        background-color: #0003;
        transition-property: background-color, overlay, display;
        transition-duration: .3s;
        transition-timing-function: ease-in-out;
        transition-behavior: allow-discrete
    }

    @starting-style {
        .site-dialog[open]::backdrop {
            background-color: #0000
        }
    }.site-dialog:not([open])::backdrop {
         background-color: #0000
     }
}

.contact-page {
    padding-block-end: var(--gap-3xl);
    display: grid;
    grid-template-columns:1fr 1fr;
    grid-column-gap: var(--gap-l)
}

.contact-page h1 {
    grid-column: 1/-1
}

.contact-page > * + *:not(.breadcrumbs,h1) {
    margin-block-end: var(--gap-xl)
}

.contact-page .contact-form-wrap, .contact-page .contacts {
    padding-block: var(--gap-m);
    padding-inline: var(--gap-s);
    border-radius: var(--default-border-radius);
    box-shadow: 0 0 3px hsl(from var(--primary-color-mutted) h s 65% / 50%)
}

@media (width <= 768px) {
    .contact-page {
        grid-template-columns:1fr
    }
}

.contact-page #contact-form button {
    margin-block-start: var(--gap-m);
    margin-inline: auto
}

.contact-page .contacts {
    display: grid;
    place-content: center
}

.contact-page .contacts > * {
    display: grid;
    grid-template-columns:var(--font-size-lg) 1fr;
    gap: var(--gap-2xs);
    align-items: center
}

.contact-page .contacts > * + * {
    margin-block-start: var(--gap-m)
}

.contact-page .contacts > * svg {
    --text-color: var(--primary-color);
    width: var(--font-size-lg);
    height: var(--font-size-lg)
}

.contact-page .contacts > * .item-title {
    --font-size: var(--font-size-sm);
    --font-weight: 600
}

.contact-page .contacts > * span, .contact-page .contacts > * a {
    grid-column: 2/3
}

.contact-page .map-wrap {
    grid-column: 1/-1;
    border-radius: var(--default-border-radius);
    overflow: hidden
}