@layer page {
    .delivery.page {
        .main.segment {
            .info-panel {
                margin: 6rem auto;
                width: 960px;
                max-width: 100%;
                color: var(--text-color);

                @media screen and (min-width: 768px) {
                    border: 4px solid var(--primary-border-color);
                    border-radius: 1rem;
                    background-color: var(--neutral-background-color);
                    padding: 1rem 2rem;
                }

                h1 {
                    font-weight: 400;
                }

                .sub-header {
                    font-weight: 500;
                    font-size: 1.2rem;
                    margin: 0.5rem 0 0;
                    color: var(--text-color);
                }

                main {
                    p {
                        margin: 2rem 0;

                        @media screen and (min-width: 768px) {
                            margin: 1rem 0;
                        }
                    }
                }

                .message-component {
                    margin-top: 1rem;
                }

                .delivery-info {
                    color: var(--text-color);
                    font-size: 1.2rem;

                    &.paid {
                        margin-bottom: 0;

                        & + p {
                            margin-top: 0;
                        }
                    }

                    &.free {
                    }
                }

                hr {
                    margin: 3rem 0;
                    color: var(--primary-border-color);
                    border-color: var(--primary-border-color);
                }
            }
        }
    }
}