/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.actions {
  display: flex;
  justify-content: flex-start;
  gap: 5px;
}

.thumbnails {
  list-style: none;
  display: flex;
  justify-content: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;
  gap: 1rem;

  .directory {
    width: 300px;

    .card-body {
      a {
        text-decoration: none;

        .title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          text-decoration: none;

          h4 {
            white-space: nowrap;
            overflow: hidden;
            width: 240px;
            text-overflow: ellipsis;
            text-decoration: none;
          }

          .badge {
            text-decoration: none;
          }
        }

        /*width: 300px;*/
        /*overflow: hidden;*/
        /*white-space: nowrap;*/
      }


      .image {
        width: 256px;
        height: 212px;

        img {
          transition: transform 0.4s linear;
          -webkit-transition: -webkit-transform 0.1s ease-out;

          &:hover {
            -webkit-transform: scale(1.05, 1.05);
          }
        }
      }
    }
  }
}