:host {
  @apply flex flex-col bg-white;
  box-shadow: 0px -2px 24px 0px #dce2e9;
  height: calc(100vh - 342px);
}

h1 {
  @apply text-center mt-12 font-bold;
  font-size: 26px;
}

p {
  @apply text-center mx-12 mt-2;
  font-size: 22px;
}

.articles {
  @apply mt-10;

  .label {
    @apply flex flex-row items-center uppercase text-dark-cerulean font-bold text-sm ml-6;

    ui-icon {
      @apply mr-2;
    }
  }

  .empty-message {
    @apply flex justify-center text-cta-l mt-12;
  }

  .article {
    @apply flex flex-col mr-7 mt-4 no-underline text-black;

    img {
      @apply rounded-xl;
      height: 315px;
      max-width: 195px;
      box-shadow: 0 0 15px #949393;
    }

    .format {
      @apply text-regular mt-2;
    }

    .price {
      @apply font-bold;
      font-size: 20px;
    }
  }
}

ui-slider {
  @apply mx-4;
}
