//////////////////////////////
// THEME / COMPONENTS / EVENTS
//////////////////////////////


@use "../variables/" as var;


@layer components {

  .wdn-calendar .unl-event-teaser-ol {
    --item-size: #{var.$ms18}em;
    grid-template-columns: repeat(auto-fit, minmax(var(--item-size), 1fr));
  }


  .unl-event-teaser {
    display: grid;
    grid-template: 'a b' auto 'a c' 1fr / var.$length-em-8 1fr;
  }


  .unl-event-title { grid-area: b; }
  .unl-event-date { grid-area: a; }
  .unl-event-details { grid-area: c; }


  @media screen and (min-width: 50em) and (max-width: 74em) {

    .wdn-calendar .unl-event-teaser-ol:has(> :last-child:nth-child(4)) {
      --item-size: #{var.$ms21}em;
    }

  }


  @media screen and (min-width: 50em) and (max-width: 101.375em) {

    .wdn-calendar .unl-event-teaser-ol:has(> :last-child:nth-child(5)) {
      --item-size: #{var.$ms21}em;
    }

  }


  @media screen and (min-width: 73.625em) and (max-width: 104.375em) {

    .wdn-calendar .unl-event-teaser-ol:has(> :last-child:nth-child(6)) {
      --item-size: #{var.$ms20}em;
    }

  }


  @media screen and (min-width: 104.375em) and (max-width: 135.25em) {

    .wdn-calendar .unl-event-teaser-ol:has(> :last-child:nth-child(6)) {
      --item-size: #{var.$ms22}em;
    }

  }


  @media screen and (min-width: 101.25em) {

    .wdn-calendar .unl-event-teaser-ol:has(> :last-child:nth-child(7)),
    .wdn-calendar .unl-event-teaser-ol:has(> :last-child:nth-child(8)) {
      --item-size: #{var.$ms21}em;
    }

  }


  @media screen and (min-width: 73.625em) and (max-width: 104.25em){

      .wdn-calendar .unl-event-teaser-ol:has(:nth-child(n+9)) {
          --item-size: #{var.$ms20}em;
      }

  }


  @media screen and (min-width: 104.25em) {

    .wdn-calendar .unl-event-teaser-ol:has(:nth-child(n+9)) {
      --item-size: #{var.$ms22}em;
    }

  }

}