// --------------------------------------------------
// Module Styles
// --------------------------------------------------

// Extend style in base
// --------------------
@import "../../../plugins/system/t4/themes/base/scss/_modules";

// 
// Genecric Module
// --------------------------------------------------
.t4-module {

  // Module Inner
  .module-inner {
  }
}

// Module Title
// ------------
.module-title {
  font-size: 1.5rem;
  margin-bottom: $spacer;

  span {
    
  }
}

// Module Content
// --------------
.module-ct,
.moduletable {
}


// 
// Modules Prefixes
// -----------------------------

// Dark
// -----
.module-dark {
  .module-title {
  }
} 

.module.bg-primary,
.module.bg-secondary,
.module.bg-success,
.module.bg-danger,
.module.bg-warning,
.module.bg-info,
.module.bg-dark,
// Cards
.card.bg-primary,
.card.bg-secondary,
.card.bg-success,
.card.bg-danger,
.card.bg-warning,
.card.bg-info,
.card.bg-dark {
  .module-title {
    span {
    }
  }

  .module-ct {
    p {
    }
  }
}

// Mod rounded
// -----------
.module.mod-rounded {
  .mod-rounded {
  }
}

// Hilite
// ----------
.module-hilite {
}

// Shadow
// ----------
// Use to add Shadow to modules
.mod-shadow {
  .mod-shadow {
  }
}

// Module outline
.mod-border {
  .mod-border {
  }
}


//
// JOOMLA! MODULES
// --------------------------------------------------

// Generic Modulable
// -----------------
// Modules are used in Component Position
.moduletable {
  > h3 {
  }
}


// Menu
// ----
.t4-module,
.t4-card,
.moduletable,
.module_menu {
  .nav {
  }
  
  .nav li {
  }

  .nav li .separator {
  }
  
  .nav li a {
    // Link States
    &:hover, &:active, &:focus {
    }
  }

  // Active state
  .nav > li.active > a {
    font-weight: $font-weight-bold;
  }

  // Sub Menus
  .nav li ul {
  }
}


// Menus in Dark Modules
.module.bg-primary,
.module.bg-secondary,
.module.bg-success,
.module.bg-danger,
.module.bg-warning,
.module.bg-info,
.module.bg-dark,
// Cards
.card.bg-primary,
.card.bg-secondary,
.card.bg-success,
.card.bg-danger,
.card.bg-warning,
.card.bg-info,
.card.bg-dark {
  .nav li a {
  }
}

// Masthead
.ja-masthead {
  background-color: var(--color-primary);
  background-image: url('../images/bg-masthead.jpg');

  .ja-masthead-detail {
    padding: $spacer-lg * 4 $spacer;
    max-width: 1000px;
    margin: auto;

    // Tablet
    @include media-breakpoint-down(lg){
      padding: $spacer-xxl $spacer;
    }

    // Title
    .ja-masthead-title {
      margin-top: 0;
      margin-bottom: $spacer-lg/2 !important;
      font-size: var(--h1-font-size);

      // Mobile
      @include media-breakpoint-down(md){
        //font-size: var(--h2-font-size);
      }
    }

    // Description
    .ja-masthead-description {
      margin: $spacer auto 0;
      color: var(--body-text-color);
      font-size: $font-size-md;
      opacity: 0.8;
      max-width: 600px;
    }
  }

  &.has-bg {
    &:before {
      background: rgba($black, .5);
      opacity: 1;
    }

    .ja-masthead-title {
      color: $white;
    }

    .ja-masthead-description {
      color: rgba($white, .9);
    }

    .createdby [itemprop="name"] {
      color: $white;
    }
  }

  &:not(.has-bg){
    &:before {
      display: none;
    }
  }

  // Page detail
  &.blend-masthead {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;

    &:before {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      z-index: 3;
    }

    .ja-masthead-detail {
      position: relative;
      z-index: 10;

      // Title
      .page-header h2 {
        font-size: var(--h1-font-size);

        a {
          color: $white;
        }
      }

      .article-info {
        margin-top: $spacer;
        justify-content: center;
        color: rgba($white, .7) !important;
      }

      .box-inner {
        position: relative;
        margin-top: $spacer-xl*2;

        &.no-category {
          margin-top: 0;
        }

        .category-name {
          display: block;
          position: absolute;
          top: -2.5rem;
          font-size: 0;

          &:after {
            display: none;
          }

          a {
            font-size: $font-size-sm;
            background: var(--color-primary);
            color: $white;
            padding: $spacer-sm/2 $spacer;
            border-radius: $border-radius-sm;
          }
        }
      }
    }
  }
}

.no-bg-masthead {
  .ja-masthead {
    background: var(--color-primary) !important;

    &:before {
      display: none;
    }

    .ja-masthead-detail {
      .ja-masthead-title {
        color: var(--heading-color);
      }
    }
  }
}

// Search
.mod-finder {
  .mod-finder__search {
    .awesomplete {
      width: 100%;
    }

    input.form-control {
      width: 100%;
      max-width: 100%;
      padding-right: 40px;
    }

    button[type="submit"]{
      position: absolute;
      top: 12px;
      right: 8px;
      font-size: 0;
      background: transparent;
      border: none;
      padding: 0;

      .icon-search {
        margin-right: 0;

        &:before {
          display: none;
        }

        &:after {
          content: '';
          display: inline-block;
          background-image: url('../images/ic-search.png');
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
          width: 24px;
          height: 24px;
        }
      }
    }
  }

  .js-finder-advanced {
    margin-top: $grid-gutter-width/2;
  }

  .filter-branch {
    .control-group {
      margin-bottom: $spacer;

      .controls {
        margin-left: 0;
      }
    }
  }
}

// Last News
.latestnews  {
  .intro-image {
    width: 80px;

    img {
      border-radius: $border-radius;
      height: 80px;
      object-fit: cover;
      width: 100%;
    }
  }

  .box-content {
    //padding-left: $spacer-lg;
    flex: 1;

    .title {
      a {
        font-size: $font-size-base * 1.125;
        color: $headings-color;
        padding: 0 0 $grid-gutter-width/3;

        &:before {
          display: none;
        }

        &:hover {
          color: var(--color-primary);
        }
      }
    }

    .article-info {
      display: none;
    }

    .hits {
      i {
        color: var(--color-primary);
        margin-right: 5px;
      }
    }
  }

  li {
    display: flex;
    list-style: none;
    gap: 1rem;

    @include media-breakpoint-between(lg,xl){
      flex-direction: column;
    }

    +li {
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      padding-top: $spacer-lg;
      margin-top: $spacer-lg;
    }
  }
}

// Tags
div.tagspopular {
  ul li {
    background: $white;
    border: 1px solid $border-color;
    border-radius: $border-radius;
    padding: 0;
    margin: 0 9px 9px 0;
    display: flex;
    align-items: center;

    a {
      color: var(--body-text-color);
      padding: 10px 16px;
      display: flex;
      align-items: center;
      font-size: $font-size-sm;
    }

    .tag-count {
      margin-left: -10px;
    }

    &:hover {
      background: $gray-200;

      a {
        color: var(--body-text-color);
      }
    }
  }
}

// Related Post
.relateditems {
  margin-bottom: -$grid-gutter-width;

  .item {
    margin-bottom: $grid-gutter-width;
  }

  &.type-1 {
    .item {
  
      .top-lead {
        position: relative;
        overflow: hidden;
        //margin-bottom: $spacer-xl;
    
        .category {
          position: absolute;
          top: 12px;
          left: 12px;
          z-index: 2;
          transition: all .6s ease;
          opacity: 0;
          visibility: hidden;
    
          a {
            border-radius: $border-radius-sm;
            color: $white;
            background: var(--color-primary);
            padding: 5px 12px;
            font-size: $font-size-sm;
          }
        }
      }
  
      .thumbnail-article {
    
        img {
          transition: all 1s ease;
          border-radius: $border-radius $border-radius 0 0;
        }
      }
  
      .item-inner {
        height: 100%;
        display: flex;
        flex-direction: column;

        h3 {
          margin-top: 0;
  
          a {
            color: $headings-color;
            font-size: var(--h4-font-size);
            padding: 0;
    
            &:before {
              display: none;
            }
    
            &:hover {
              color: var(--color-primary);
            }
          }
        }
  
        .article-info {
          margin-bottom: $spacer;
        }
  
        .intro-text {
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          overflow: hidden;
          position: relative;
          max-height: calc(1.5em * 3);

          p {
            margin-bottom: 0;
          }
        }
  
        .readmore {
          display: none;
        }
  
        &:hover {
          .category {
            opacity: 1;
            visibility: visible;
          }
    
          .thumbnail-article {
            img {
              transform: scale(1.03);
            }
          }
        }
      }
    }

    .content-info {
      border-radius: $border-radius;
      background: $white;
      border: 1px solid $border-color;
      padding: $spacer-xl;
      margin-top: -$spacer-xl;
      flex: 1;
      position: relative;
      z-index: 1;

      // Mobile
      @include media-breakpoint-down(sm){
        padding: $spacer-lg;
      }
    }
  }

  // type tour
  &.type-2 {
    .item-image {
      margin-right: 0;
    }

    .info-location {
      margin-bottom: $spacer-sm;
    }

    // Title
    .page-header {
      margin-bottom: $spacer-sm;

      h2 {
        // Tablet view
        @include media-breakpoint-down(xl) {
          font-size: var(--h4-font-size);
        }
      }
    }
  }
}


// Login Form
// ----------
#login-form {
  margin-bottom: 0;

  // Input Icons
  .add-on {
  }

  .btn-primary {
  }
  
  .mod-login__username,
  .mod-login__password,
  .mod-login__twofactor {
    margin-bottom: 1rem;

    input {
      max-width: none;

      @include media-breakpoint-up (md) {
        max-width: none;
      }
    }

    .input-group-text {
      border-radius: 0 3px 3px 0;
    }
  }

  .mod-login__remember {
    margin-bottom: 1rem;
  }

  .mod-login__submit {
    margin-bottom: 0.5rem;
  }

  .mod-login__options {
    margin-bottom: 0;

    li {
      padding: 0.25rem 0;

      a {
        color: var(--body-text-color);
        padding-top: 0;
        padding-bottom: 0;

        &:hover, &:focus, &:active {
          color: var(--body-link-hover-color);
        }
      }
    }
  }

}

// Advertisement
// -------------
.bannergroup {
}

.banneritem {
  a {
    font-weight: bold;
  }
}

.bannerfooter {
  border-top: 1px solid $border-color;
}


// Categories, Most Read,
// Most Popular, Archieve, Tags...
// -------------------------------
.categories-module {
  @include module-list($icon: "\f07b");

  > li {
    //border-bottom: 1px dotted $border-color;
    color: $gray-700;

    h4 {
      font-weight: 500;
    }
  }

  a {
    color: $body-color;

    &:hover, &:focus, &:active {
      color: var(--color-primary);
    }
  }
}

// Categories
.categories-module {
  &.mod-slide {
    .item-wrap {
      display: flex;
      align-items: flex-end;
      border-radius: $border-radius;
      position: relative;
      overflow: hidden;
      min-height: 460px;
      padding: var(--gutter-sm);

      // Mobile view
      @include media-breakpoint-down(md) {
        min-height: 360px;
      }

      // Background
      .bg-intro {
        background-size: cover;
        background-position: center center;
        border-radius: $border-radius;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        transition: 500ms all;
      }

      // Content
      .item-inner {
        background: rgba(255,255,255,0.7);
        border-radius: $border-radius;
        position: relative;
        padding: var(--gutter-sm);
        text-align: center;
        width: 100%;

        a {
      
        }

        h5 {
          margin: 0;
        }
      }

      &:hover {
        .bg-intro {
          transform: scale(1.04);
          transition: 500ms all;
        }
      }
    }
  }

  &.mod-list {
    .row {
      row-gap: $grid-gutter-width;
    }

    .item-wrap {
      display: flex;
      align-items: flex-end;
      border-radius: $border-radius;
      position: relative;
      overflow: hidden;
      min-height: 460px;
      padding: var(--gutter-sm);

      // Mobile view
      @include media-breakpoint-down(md) {
        min-height: 360px;
      }

      // Background
      .bg-intro {
        background-size: cover;
        background-position: center center;
        border-radius: $border-radius;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        transition: 500ms all;
      }

      // Content
      .item-inner {
        background: rgba(255,255,255,0.7);
        border-radius: $border-radius;
        position: relative;
        padding: var(--gutter-sm);
        text-align: center;
        width: 100%;

        a {
      
        }

        h5 {
          margin: 0;
        }
      }

      &:hover {
        .bg-intro {
          transform: scale(1.04);
          transition: 500ms all;
        }
      }
    }
  }
}

.categories-tour {
  display: flex;
  justify-content: center;

  .categories-tour-inner {
    align-items: center;
    background: var(--color-light);
    border-radius: $border-radius;
    display: flex;
    gap: 10px;
    list-style: none;
    padding: $spacer / 2 $spacer;
    margin: 0;

    // Tablet view
    @include media-breakpoint-down(lg) {
      background: transparent;
      padding: 0;
      flex-wrap: wrap;
      justify-content: center;
    }

    li {
      a {
        display: inline-block;
        border-radius: $border-radius;
        padding: $spacer / 2;

        // Tablet view
        @include media-breakpoint-down(lg) {
          background: var(--color-light);
        }
      }

      &.active {
        a {
          background: var(--color-primary);
          color: $white;
          padding: $spacer / 2 $spacer;
        }
      }
    }
  }
  
}

.tour-item {
  background: $white;
  border: 1px solid $border-color;
  border-radius: $border-radius-lg;
  display: flex;
  flex-direction: column;
  height: 100%;

  // Intro Image
  .intro-image {
    position: relative;
    margin-bottom: -$grid-gutter-width;

    img {
      width: 100%;
    }
  }

  // Label
  .tour-label {
    background: $red;
    border-radius: $border-radius;
    color: $white;
    font-size: $font-size-sm;
    padding: 4px 10px;
    position: absolute;
    top: var(--gutter-normal);
    left: var(--gutter-normal);

    i {
      margin-right: 4px;
    }

    &.label-featured {
      background: $green;
    }
  }

  // Info
  .tour-other-info {
    display: flex;
    flex-wrap: wrap;
    gap: $spacer;
    opacity: 0.8;
  }

  // Category
  .category-article a {
    color: var(--heading-color);
    display: flex;
    align-items: center;

    &:before {
      background: var(--color-primary);
      border-radius: $border-radius;
      display: inline-block;
      content: "";
      margin-right: 5px;
      height: 10px;
      width: 10px;
    }

    &:hover,&:focus,&:active {
      color: var(--color-primary);
    }
  }

  // Tour Price
  .tour-price {
    color: $blue;
    font-size: var(--h4-font-size);
    font-weight: 600;
    margin-bottom: $spacer;
  }

  // Intro Image
  .intro-image img {
    border-radius: $border-radius $border-radius 0 0;
    transform: none!important;
  }

  // Content
  .info-article {
    background: $white;
    border-radius: $border-radius-lg;
    display: flex;
    flex-direction:column;
    padding: var(--gutter-normal);
    position: relative;
    height: 100%;
  }

  p.readmore {
    margin-bottom: $spacer;
  }

  // Extra Info
  .info-location {
    i {
      color: var(--color-primary);
      margin-right: 4px;
    }
  }

  .extra-info-tour {
    background: var(--color-light);
    border-radius: $border-radius;
    display: flex;
    flex-wrap: wrap;
    gap: $spacer;
    padding: $spacer / 2 $spacer;
    margin-top: auto;

    // Mobile view
    @include media-breakpoint-down(sm) {
      background: transparent;
      padding: 0;
    }

    i {
      color: $blue;
      margin-right: 4px;
    }
  }
}

.mod-tour-list {
  row-gap: var(--gutter-normal);

  // Layout 2
  &.style-2 {
    .col {
      + .col {
        border-top: 1px dashed rgba(0,0,0,0.1);
        margin-top: $spacer;
        padding-top: $spacer;
      }
    }
    .tour-item {
      background: transparent;
      border: 0;
      flex-direction: row;
      height: auto;

      // Intro Image
      .intro-image {
        margin: 0;
        max-width: 120px;
        flex: 0 0 120px;
        margin-right: $spacer;

        img {
          border-radius: $border-radius;
        }
      }

      // Category
      .category-article a {
        font-size: 13px;
      }

      // Content
      .info-article {
        background: transparent;
        padding: 0;

        // Title
        .mod-articles-title h6 {
          margin-top: 0;
          margin-bottom: 0;
        }

        // Price
        .tour-price {
          font-size: var(--h6-font-size);
          margin-bottom: 0;
        }
      }
    }
  }
}



// Layout Slide
.mod-tour-slide {
  overflow: hidden;

  // Owl Slide
  .owl-carousel {
    .owl-stage-outer {
      overflow: visible;

      .owl-item {
        // opacity: 0.5;

        &.active {
          opacity: 1;
        }
      }
    }

    .owl-dots {
      bottom: var(--gutter-sm);
      left: 0;
      margin: 0;
      position: absolute;
      width: 100%;
    }
  }

  // Item Info
  .item-inner {
    background-size: cover;
    border-radius: $border-radius-lg;
    background-position: center center;
    display: flex;
    justify-content: flex-end;
    padding-top: $grid-gutter-width * 4;
    position: relative;
    min-height: 550px;
    overflow: hidden;

    // Tablet view
    @include media-breakpoint-down(md) {
      min-height: 440px;
    }

    @include media-breakpoint-down(sm) {
      min-height: 360px;
    }

    &:before {
      background: linear-gradient(to bottom, transparent, $black);
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
    }

    // Info
    .info-article {
      --heading-color: #fff;
      --body-text-color: #fff;
      background: transparent;
      color: var(--body-text-color);
      align-items: center;
      position: relative;
      text-align: center;
      padding-bottom: var(--gutter-lg);
    }

    .tour-other-info {
      justify-content: center;
    }

    // Label
    .tour-label {
      position: static;
      display: inline-block;
      margin-bottom: $spacer;
    }

    // Extra Info
    .extra-info-tour {
      background: transparent;
      justify-content: center;
    }
  }
}

// END TOUR LAYOUT


.category-module {
}

.mostread,
.latestnews,
.relateditems,
.tagssimilar ul {
  li a {
  }
}

.archive-module {
}

.mod-list-layout-1 {
  // Item Highlight
  .item-highlight {
    .item-article {
      position: relative;

      .article-media img {
        border-radius: $border-radius;
        object-fit: cover;
        object-position: center;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
      }

      .article-content {
        position: relative;
        z-index: 2;
        padding: $grid-gutter-width * 3 $grid-gutter-width * 2;

        // Tablet view
        @include media-breakpoint-down(lg) {
          padding: $grid-gutter-width * 2 $grid-gutter-width;
        }

        // Content Inner
        .content-inner {
          background: rgba(255,255,255,0.8);
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
          border-radius: $border-radius;
          padding: var(--gutter-lg);
          max-width: 500px;

          // Tablet view
          @include media-breakpoint-down(lg) {
            padding: $grid-gutter-width;
          }
        }

        // Title
        h4 {
          font-size: var(--h3-font-size);
          margin-bottom: $grid-gutter-width;

          // Tablet view
          @include media-breakpoint-down(lg) {
            margin-bottom: $grid-gutter-width / 2;
          }
        }
      }

      .mod-articles-category-readmore {
        margin-bottom: 0;
      }
    }
  }

  // Item Child
  .item-child {
    // Intro Image
    .intro-image {
      margin-bottom: $spacer-lg;

      img {
        border-radius: $border-radius;
      }
    }

    // Title
    h4 {
      // Mobile view
      @include media-breakpoint-down(lg) {
        font-size: var(--h5-font-size);
      }
    }
  }
}

.bottom-actions {
  text-align: center;
  margin-top: var(--gutter-lg);
}


// News Feed
// ----------
.feed {
  // Feed Title
  h4 {
  }

  // Feed list
  .newsfeed {

    li {
      border-top: 1px solid $border-color;
    }

    .feed-link {
    }

    .feed-item-description {
    }
  }

}


// Syndication
// -----------
a.syndicate-module {
}


// Latest Users 
// ------------
.latestusers {
  li {
  }
}


// Stats 
// -----
.stats-module {
  dt, dd {
  }
}


// Popular Tags
//-------------
.tagspopular {
  ul {
  }

  ul > li {
  }

  ul > li > a {
    // Links states
    &:hover,
    &:focus,
    &:active {
    }
  }

  .tag-count {
  }
}


// Breadcrums Module
// -----------------
.module-ct > ol.breadcrumb {
}


// Extra style for Articles categories module
// ------------------------------------------
.magz-layout {
  .item-image {
    display: block;
    margin-bottom: 1rem;
  }

  .item-title {
    font-size: 1.1rem;
    margin: 0 0 0.5rem;

    a {
      color: var(--body-text-color);

      &:hover, &:focus, &:active {
        border: 0;
        color: var(--body-link-hover-color);
        text-decoration: none;
      }
    }
  }

  h2.item-title {
    font-size: 2rem;
  }

  .item-meta {
    font-size: 0.7rem;
    margin-bottom: 1rem;
    text-transform: uppercase;

    span {
      position: relative;

      &::after {
        color: $gray-400;
        padding: 0 4px;
        content: "-";
        display: inline-block;
        // position: absolute;
        // right: 0;
        // top: 0;
      }

      &:last-child::after {
        display: none;
      }
    }

    a {
      border-bottom: 1px solid $border-color;
      color: var(--body-text-color);

      &:hover, &:focus, &:active {
        border-bottom: 1px solid var(--body-link-hover-color);
        color: var(--body-link-hover-color);
      }
    }
  }

  // Hightlight layout
  &.highlight-layout {

  }

  // Grid layout
  &.grid-layout {

  }

  // List layout
  &.list-layout {
    .item-inner {
      display: flex;
      align-items: flex-start;
      margin-bottom: 1.5rem;
    }

    .item-image {
      margin: 0.5rem 1rem 0 0;
      max-width: 25%;

      img {
        width: 100%;
      }
    }
  }
}


// Blog list style
// ---------------
.blog-list {
  list-style: none;
  margin: 0;
  padding: 0;
  gap: $grid-gutter-width 0;

  .item-image {
    @extend .d-block;
    @extend .mb-4;

    img {
      @extend .rounded-4;
      @extend .shadow-sm;
    }
  }

  .item-title {
    @extend .fs-5;
    margin: 0 0 0.5rem;
    
    a {
      color: var(--body-text-color);

      &:hover, &:focus, &:active {
        color: var(--body-link-hover-color);
      }
    }
  }

  .item-meta {
    @extend .fs-sm;
    @extend .mb-3;
    @extend .d-flex;

    span {
      color: var(--body-text-color);
      margin-right: 0.5rem;
      padding-right: 1rem;
      position: relative;

      &::after {
        background-color: $gray-400;
        content: "";
        display: block;
        height: 1px;
        position: absolute;
        right: 0;
        top: 10px;
        width: 6px;
      }

      &:last-child {
        &::after {
          display: none;
        }
      }
    }

    a {
      color: var(--body-text-color);

      a:hover, a:focus, a:active {
        color: var(--body-link-hover-color);
      }
    }

  }

  .item-introtext {
    margin-bottom: 1.5rem;
  }

  .item-readmore {
    a {
      @extend .btn;
      @extend .btn-sm;
      @extend .btn-outline-primary;
    }
  }
}


.item-meta {
  display: flex;
  align-items: center;

  .item-author {
    display: flex;
    align-items: center;
  }

  .author-img {
    border-radius: 50%;
    display: inline-block;
    height: 24px;
    overflow: hidden;
    margin-right: calc($spacer / 2);
    padding: 0;
    position: relative;
    width: 24px;

    &::after {
      display: none !important;
    }

    img {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
    }
  }

  strong {
    display: inline-block;
    margin-left: 4px;
  }
}

.mega-col-module {
  .list-layout {
    .blog-item {
      margin-top: 0;
    }

    .item-inner {
      margin-bottom: 0.5rem;
    }

    .item-image {
      border-radius: 5px;
      margin-top: 0;
      max-width: 20%;
      overflow: hidden;
    }

    .item-title {
      font-size: 1rem;
      font-weight: 400;
    }
  }
}