/*
 * @file
 * Provides the layout styles for megamenu layout section.
 */

.l--megamenu > .l__region {
  /*padding: 20px;*/
}

.l--megamenu--split > .l__region {
  /*padding-left: 30px;*/
  /*padding-right: 30px;*/
}

.l--megamenu > .l__region:not(:last-child) {
  /*border-right: 1px solid var(--color-border);*/
}

.l--megamenu .l__region-inner {
  display: flex;
  flex-wrap: wrap;
  margin: -30px;
}

.l--megamenu .l__region-inner > * {
  flex: none;
  margin: 30px;
  /*max-width: 240px;*/
  width: calc((100% + 60px) / 3);
  padding: 40px;
}

@supports( display: grid ) {
  .l--megamenu .l__region-inner {
    display: grid;
    grid-gap: 60px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin: 0;
  }

  .l--megamenu .l__region-inner > *  {
    margin: 0;
    width: auto;
  }
}

.l--megamenu--split {
  display: flex;
  padding: 0;
}

.l--megamenu--split > * {
  flex: 1
}

.l--megamenu--split > :first-child {
  flex: none;
  /*width: 330px;*/
  width: 50%;
}

/* Layout Paragraphs Compensation */
.l--megamenu .layout-paragraphs-add-content__toggle {
  height: 30px !important;
  width: 30px !important;
}