:global {
  // TODO: Remove line 1 - 6 when background color fields in Hercules are added
  .info_grid {
    background: #ffffff;
  }
  .operator_information_block {
    background: #f3f2f2;
  }
}

.container {
  position: relative;
  padding-top: var(--module-bottom-spacing) !important;
  @include flex-direction(column);
  gap: 1.6rem;

  // override collapse styles
  > div > div {
    > button {
      font-weight: 700;
      font-size: 2rem !important;
      line-height: 3rem;
      text-transform: capitalize;
      color: var(--info-grid-button-color);
      width: 100%;
      text-align: left;
  
      &::after {
        left: auto !important;
        right: 0;
        border-color: var(--info-grid-button-color) !important;
      }
  
      + div {
        overflow: visible !important;
      }
      
      @include min(tablet) {
        display: none !important;
  
        + div {
          max-height: fit-content !important;
        }
      }
    }
  }
}

.containerColumn {
  @include flex-direction(column);
  gap: 1.6rem;
  padding: 0;

  @include min(tablet) {
    @include flex-direction(row);
  }
}
  
.grid {
  @include flex-direction(column);
  padding-top: 1.4rem;
  margin-top: 1rem;

  @include min(tablet) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1.6rem;
    padding: 0;
  }

  @include min(laptop) {
    grid-template-columns: repeat(4, 1fr);
  }
}

.singleColumn {
  @include flex-direction(column);
  gap: 0.8rem;

  @include min(tablet) {
    gap: 1.6rem;
  }
}

.singleColumnSeeMore {
  @include flex-align(center, center); 
  align-self: flex-start;
  border-radius: 100px;
  background: #161128;
  padding: 0.8rem 2.4rem;
  gap: 1.2rem;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 2.2rem;
  text-transform: capitalize;
  color: var(--color-4);
}

.templateThree {
  gap: 1rem;
  
  @include min(tablet) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

}