@use '../../sass/abstracts/variables' as *;
@use '../../sass/abstracts/typography';
@use '../../sass/abstracts/mixins';

#{$component-prefix}property-list {
  $p: &;
  overflow: hidden;

  &__container {
    margin: -1px; // Remove borders
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
  }

  &__item {
    background-color: $light-grey;
    padding: $spacer-6 $spacer-5;
    border-right: 1px solid $sodra-black-25;
    border-bottom: 1px solid $sodra-black-25;
    display: flex;
    flex-direction: column;
    height: 100%;

    @include mixins.media-breakpoint-up(md) {
      min-height: 400px;
    }
  }

  &__item-image {
    width: 5em; // Image size for mobile
    height: auto;
    margin: 0 auto $spacer-6;

    @include mixins.media-breakpoint-up(md) {
      width: 6.875em; // Image size for desktop
      margin-top: $spacer-4;
    }
  }

  &__text {
    margin-top: auto; // Push text content to the bottom

    #{$p}__item-name {
      @include typography.alt-label-small;

      @include mixins.media-breakpoint-up(md) {
        @include typography.alt-label-medium;
      }
    }

    #{$p}__item-value {
      @include typography.display-small();

      @include mixins.media-breakpoint-up(md) {
        @include typography.display-large;
      }
    }
  }
}