main {
    padding-block: var(--spacing-2xl);
    font-size: 1.125rem;
}

h1 {
    font-size: 2em;
}

h1, h2 {
    margin-bottom: var(--spacing-lg);
}

form {
    max-width: 600px;
    margin-inline: auto;
}

form button {
    padding-block: var(--spacing-md);
}

form label {
    margin-block-end: var(--spacing-sm);
    color: var(--color-text-main);
    font-weight: 400;
}

form p {
    display: grid;
    margin-block-end: var(--spacing-md);
}

form button {
    width: 100%;
}

.page_images {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-md);
}

.page_images figure,
.page_images figure img {
    max-width: 100%;
    background-color: var(--color-background);
}

.page_images figure {
    border: 2px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    padding-block-end: var(--spacing-xs);
    transition: all .2s;
    overflow: hidden;
    z-index: 0;
    outline: none;
}

.page_images figure:hover, 
.page_images figure:focus-within {
    transform:scale(2.0);
    z-index: 9;
    border-color: #86b7fe;
    /* box-shadow: 0 0 0 0.1rem rgba(13, 110, 253, .25); */
    border-width: 1px;
}

.page_images figure:hover figcaption,
.page_images figure:focus-within figcaption {
    zoom: 0.8;
}

figure figcaption {
    font-style: italic;
    font-size: var(--font-size-sm);
    text-align: center;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
}

#Receipt_Grid {
    display: grid;
    gap: 24px;
}

#Form_Box {
    background: var(--color-surface);
    padding: var(--spacing-2xl);
}