@use "src/styles/screen";
@use "src/styles/grid-sizes" as gridSizes;

.transition {
  @include screen.mobile {
    grid-gap: gridSizes.$gap-small;
    grid-template-columns: repeat(2, minmax(gridSizes.$time-width, 1fr));

    &__title {
      grid-area: 1 / 1 / 2 / 2; // first column of first row
    }

    &__status {
      grid-area: 2 / 1 / 3 / 2; // first column of second row
    }

    &__beginning-time {
      grid-area: 3 / 1 / 4 / 2; // first column of third row
    }

    &__finish-time {
      grid-area: 3 / 2 / 4 / 3; // second column of third row
    }

    &__first-property {
      grid-area: 4 / 1 / 5 / 2; // first column of fourth row
    }

    &__second-property {
      grid-area: 4 / 2 / 5 / 3; // second column of fourth row
    }

    &__third-property {
      grid-area: 5 / 1 / 6 / 3; // first and second columns of fifth row
    }

    &__bag-belt.transition__first-property {
      grid-area: 4 / 1 / 5 / 3; // first and second columns of fourth row
    }
  }
}
