@import "../theme/atemcampus.scss";

$cloud-gap: 10px;
$cloud-padding: 40px 24px;
$cloud-max-width: 1248px;
$cloud-info-max-width: 900px;
$cloud-info-margin-bottom: 64px;
$cloud-label-padding: 10px 21px;
$cloud-label-border-radius: 23px;
$cloud-label-background: rgba(255, 255, 255, 0.00);
$cloud-mobile-margin: 60px;
$cloud-icon-width: 20px;


.keyword-cloud-main-container {
    width: 100%;
    display: block;
  
    .keyword-cloud-container {
        margin: rem(110px) auto;
      max-width: $cloud-max-width;
      padding: $cloud-padding;
      text-align: center;
  
      /* -------- TITLE + DESCRIPTION -------- */
      .keyword-cloud-info-container {
        margin-bottom: $cloud-info-margin-bottom !important;
        gap: $card-gap-horizontal;
        max-width: $cloud-info-max-width;
        margin: 0 auto;
  
        .keyword-cloud-title {
            @include h-xl();
            line-height: normal;
            color: $color-text-primary;
        }
  
        .keyword-cloud-description {
          @include body-large();
          
        }
      }
  
      .keyword-clouds-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: $cloud-gap; 
      }
  
      .role-container {
        display: inline-flex;
        align-items: center;
          gap: $cloud-gap;
  
          padding: $cloud-label-padding;
          border: 2px solid $color-text-primary;
          border-radius: $cloud-label-border-radius;
          background: $cloud-label-background;

  
        .label-icon-text {
          @include cta();
          line-height: $cloud-icon-width;
          color: $color-text-primary;
  
        }
  
        .label-icon {
          width: $cloud-icon-width;
          height: $cloud-icon-width;
          object-fit: contain;
        }
      }
    }
  }
  
  /* Responsive styles */
  @media (max-width: $breakpoint-md) {
    .keyword-cloud-container {
        .keyword-cloud-container {
        margin: $cloud-mobile-margin auto;
          .keyword-clouds-row {
            gap: $cloud-gap
          }
          .label-icon-text {
            padding: $cloud-label-padding;
          }
        }
    }
  }