@layer page {
    .delivery.page {
        .segment {
            &.top {
                margin-top: 3rem;

                h1 {
                    font-weight: 400;
                }

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

            &.middle {
                margin-top: 8rem;

                & > .container {
                    display: flex;
                    flex-direction: column;
                    flex-wrap: nowrap;
                    gap: 2.5rem;
                }

                p {
                    margin: 0.5rem 0;
                    color: var(--text-color);
                }

                .info {
                    &.tastamat {
                        position: relative;

                        .bg-image {
                            @media screen and (min-width: 992px) {
                                position: absolute;
                                top: -10rem;
                                background-image: url(/images/tastamat-delivery.png);
                                background-repeat: no-repeat;
                                background-position-x: right;
                                background-position-y: top;
                                background-size: 10rem;
                                z-index: -100;
                                width: 100%;
                                height: 512px;
                            }
                        }

                        & > img {
                            width: 13rem;
                            margin-bottom: 0.5rem;
                        }
                    }

                    &.courier {
                        position: relative;

                        .bg-image {
                            @media screen and (min-width: 992px) {
                                position: absolute;
                                top: 0;
                                left: 10rem;
                                background-image: url(/images/courier-delivery.png);
                                background-repeat: no-repeat;
                                background-position-x: center;
                                background-position-y: top;
                                background-size: 10rem;
                                z-index: -100;
                                width: calc(100% - 10rem);
                                height: 512px;
                            }
                        }

                        h2 {
                            font-weight: 400;
                        }
                    }
                }
            }

            &.bottom {
                margin-top: 10rem;
                margin-bottom: 8rem;
            }
        }
    }
}