@use './src/styles/layouts' as *;
@use './src/styles/variables' as *;
@use './src/styles/colors' as *;
@use './src/styles/fonts' as *;
@use './src/styles/screen' as *;

:host {
    @include mobile() {
        code-sharing {
            margin-left: 0;
        }

        .k-leg {
            gap: $space-l 0;
            grid-template: auto auto auto / 1fr 1fr 1fr 1fr 1fr 1fr;
            grid-template-areas:
                'section-number logo logo logo flight-number flight-number'
                'depart-at depart-at duration duration arrive-at arrive-at'
                'depart-from depart-from depart-from arrive-to arrive-to arrive-to';

            section-number {
                grid-area: section-number;
                align-self: center;
            }

            &-flight-number {
                grid-area: flight-number;
                justify-self: end;
            }

            &-duration {
                grid-area: duration;
            }

            operator-logo-and-model {
                grid-area: logo;
            }

            .departure-time-group {
                grid-area: depart-at;
            }

            .arrival-time-group {
                grid-area: arrive-at;
                justify-self: end;
                text-align: right;
            }

            .departure-station {
                grid-area: depart-from;
            }

            .arrival-station {
                grid-area: arrive-to;
            }
        }
    }
}
