/*
   1.0 Utility functions for RTLCSS
*/
/* Replace. Replaces the declaration value with {value}.
** Usage:
** letter-spacing: 1px rtl(normal);
*/
/* Append. Appends {value} to the end of the declaration value.
** Usage:
** transform: rotate(45deg) rtl-append(scaleX(-1));
*/
/* Prepend. Prepend {value} to the begining of the declaration value.
** Usage:
** transform: rotate(45deg) rtl-prepend(scaleX(-1));
*/
/* Prepend. Prepend {value} to the begining of the declaration value.
** Usage:
** transform: rotate(45deg) rtl-prepend(scaleX(-1));
*/
/* Ignore. Ignores processing of this declaration
** Usage:
** text-align: left rtl-ignore();
*/
.mosaic-item-component {
  gap: 8px;
  gap: 0.5rem; }
  .mosaic-item-component:hover .img-container img {
    transform: scale(1.1); }
  .mosaic-item-component .img-container {
    overflow: hidden; }
    .mosaic-item-component .img-container img {
      transition: 0.6s cubic-bezier(0.32, 0.94, 0.6, 1); }
  .mosaic-item-component .text-container {
    gap: 8px;
    gap: 0.5rem; }
    .mosaic-item-component .text-container .title {
      font-family: Almarai, "GL Bader Compress Regular", "Arial Narrow", "Arial", sans-serif ;
      color: #171717;
      font-weight: 900;
      font-size: 16px;
      font-size: 1rem;
      line-height: 16px;
      line-height: 1rem; }
    .mosaic-item-component .text-container .description,
    .mosaic-item-component .text-container .description * {
      font-family: Almarai, "Roboto-Condensed", "Arial", sans-serif ;
      font-size: 14px;
      font-size: 0.875rem;
      line-height: 16.41px;
      line-height: 1.02563rem;
      margin-bottom: 8px;
      margin-bottom: 0.5rem; }