/* Сам диалог */
dialog {
    padding: 20px;
    border: none;
    outline: none;

    box-sizing: border-box;

    /* К этому параметру придёт при закрытии, он также нужен в @starting-style  */
    transform: perspective(500px) translateY(-50%) rotateX(-25deg) translateY(50%);
    opacity: 0;

    transition:
        opacity 0.2s ease-in,
        transform 0.2s ease-in,
        display 0.2s allow-discrete ease-in,
        overlay 0.2s allow-discrete ease-in;

    /* Если окно большое 1340px, то есть по бокам появились серые полосы */
    @media (width >1340px) {
        max-width: calc(1340px - 20px - 20px);
    }
}

dialog[open] {

    transition: opacity 0.2s ease-out,
        transform 0.2s ease-out,
        display 0.2s allow-discrete,
        overlay 0.2s allow-discrete;

    transform: perspective(500px) translateY(-50%) rotateX(0) translateY(50%);
    opacity: 1;


    @starting-style {
        transform: perspective(500px) translateY(-50%) rotateX(-25deg) translateY(50%);
        opacity: 0;
    }
}

html:has(dialog[open]) {
    overflow: hidden;
}


/* Фон диалога*/
dialog::backdrop {
    /* К этому параметру придёт при закрытии, он также нужен в @starting-style  */
    background-color: rgba(0, 0, 0, 0);

    transition:
        background-color 0.2s ease,
        display 0.2s ease allow-discrete,
        overlay 0.2s ease allow-discrete;
}

dialog[open]::backdrop {
    background-color: rgba(0, 0, 0, 0.5);

    @starting-style {
        background-color: rgba(0, 0, 0, 0);
    }
}

dialog h1 {
    color: #2c3e50;
    font-size: 100%;
    padding: 0;
    margin: 0 0 20px 0;
    font-weight: 600;

    /* Настольная версия */
    @media (width>576px) {
        text-align: left;
    }

    /* Мобильная версия */
    @media (width<=576px) {
        text-align: center;
    }
}