@use '../../../../../../libs/components/theme/src/lib/styles/mixins' as mixins;

:host {
  display: flex;
  border: 3px black solid;
}

.box-1,
.box-2 {
  height: 100px;
}

@include mixins.sky-host-responsive-container-xs-min() {
  .box-1 {
    flex-basis: 25%;
  }

  .box-2 {
    flex-basis: 75%;
  }
}

@include mixins.sky-host-responsive-container-sm-min() {
  .box-1 {
    flex-basis: 40%;
  }

  .box-2 {
    flex-basis: 60%;
  }
}

@include mixins.sky-host-responsive-container-md-min() {
  .box-1 {
    flex-basis: 50%;
  }

  .box-2 {
    flex-basis: 50%;
  }
}

@include mixins.sky-host-responsive-container-lg-min() {
  .box-1 {
    flex-basis: 75%;
  }

  .box-2 {
    flex-basis: 25%;
  }
}
