@layer component {
  @scope ([data-component-id$=":tile-square"]) {
    :scope {
      container-type: inline-size;
      /* text-overflow: ellipsis; */
      /*background-color: hotpink;*/
      max-width: 400px;
    }

    .tile-inside {
      display: block;
      position: relative;
      aspect-ratio: 1 / 1;
      border-radius: var(--radius-md);
      -webkit-text-decoration: none;
      text-decoration: none;
      box-shadow: var(--shadow-sm) var(--clr-gray-900);
    }

    .media-type--image {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
    }
      .media-type--image img {
        border-radius: var(--radius-md);
      }
      /*display: block;*/
    .text {
      padding: var(--sp-2);
      position: absolute;
      top: 0;
      z-index: 2;
      /*background-color: red;*/
    }
    .event-title,
    .event-date {
      font-size: 1.5rem;
      color: var(--clr-light-500);
      text-transform: uppercase;
      /*@container (width > 399px) {
        font-size: 2rem;
      }*/
    }
      @container (width < 200px) {
    .event-title,
    .event-date {
        font-size: 1.25rem;
    }
      }
    .btn {
      margin-top: var(--sp-2) !important;
    }
  } /* Endo of @scope */
} /* End of @layer component */

/*& svg {
      width: 100%;
      height: 100%;
    }*/

/*& time {
      @apply whitespace-nowrap;
    }*/

/*   & .tile-inside {

  } */
/*   & .tile-buttons {
    @apply hidden;
  } */
/*
  &.open {
    position: absolute;
    z-index: theme('zIndex.20');
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 2px solid theme('colors.primary.DEFAULT');
    background-color: theme('colors.gray.lightest');
    width: theme('spacing.full');
    max-width: theme('spacing.full');

    cursor: default;
    transition: theme('transitionDuration.500');

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start ;

    & .tile-inside {
      order: 1;
      grid-column-start: 1;
      grid-column-end: 3;
      grid-row-start: 1;
      grid-row-end: 2;
    }
    & .tile-title {
        font-size: theme('fontSize.11xl');
        color: theme('colors.primary.DEFAULT');
      }
    & .tile-body {
      display: block;
      order: 2;
      grid-column-start: 1;
      grid-column-end: 2;
      grid-row-start: 2;
      grid-row-end: 3;
    }
    & .media {
      order: 3;
      grid-column-start: 2;
      grid-column-end: 3;
      grid-row-start: 2;
      grid-row-end: 3;
    }
    & .tile-buttons {
      display: block;
      order: 4;
      grid-column-start: 3;
      grid-column-end: 4;
      grid-row-start: 2;
      grid-row-end: 3;
    }
  /*}  Endo of .open */
/*}  End of .tile-square */