@use './src/styles/variables' as *;
@use './src/styles/fonts' as *;
@use './src/styles/screen' as *;
@use './src/styles/colors' as *;
:host {
    display: grid;
    gap: 15px;
    grid-template-columns: [description] 195px [time] 100px [time] 1fr [space] minmax(0, 145px) [time] 120px [time] 1fr;
    @include tablets() {
        grid-template-columns: [description] 145px [time] 100px [time] 1fr [space] minmax(0, 80px) [time] 120px [time] 1fr;
        gap: 10px;
    }
    grid-template-areas: 'description scheduled-departure latest-departure . scheduled-arrival latest-arrival';

    padding: $space-l 0;
    margin: 0 25px 0 $space-xl;

    font-weight: $font-medium;

    captioned-time-group {
        &[role*='scheduled departure'] {
            grid-area: scheduled-departure;
        }
        &[role*='scheduled arrival'] {
            grid-area: scheduled-arrival;
        }
        &[role*='latest departure'] {
            grid-area: latest-departure;
        }
        &[role*='latest arrival'] {
            grid-area: latest-arrival;
        }
    }
}
