/**
	TABLE STYLES - /apps/atvi/callofduty/strategy-guide/components/blog/table/clientlibs/css/table.less
*/
.table-component {
  margin-block: 24px;
}
.table-component .table-inner-container {
  border: 1px solid var(--custom-accent-color, var(--default-accent-color));
}
.table-component .table {
  position: relative;
}
.table-component .table__header {
  position: relative;
  background: url('../../../../../../../content/dam/atvi/callofduty/cod-touchui/blog/intel-cards/common/ScreenStripeTexture_1x4.png') 0% 0% / 4px 2px repeat, #1b1b1b;
  padding: 8px 16px;
  color: #F3F4F5;
  min-height: 44px;
}
.table-component .table__header:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(0deg, var(--custom-accent-color-50, var(--default-accent-color-50)) 0%, var(--custom-accent-color-50, var(--default-accent-color-50)) 100%);
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.35), 0px 0px 24px 0px var(--custom-accent-color, var(--default-accent-color)) inset;
}
.table-component .table__header--title {
  font-family: "Hitmarker Condensed Black", Arial;
  font-weight: 900;
  font-style: normal;
  letter-spacing: 1px;
  font-size: 1.75rem;
  line-height: 1.75rem;
  text-transform: uppercase;
  position: relative;
  color: #fff;
}
.table-component .table__content .table__row {
  display: flex;
  flex-direction: row;
  gap: 16px;
}
.table-component .table__content .table__cell {
  flex-grow: 1;
  max-width: 100%;
}
.table-component .table__content .table__row {
  padding: 4px 16px;
}
.table-component .table__content .table__row:nth-child(odd) {
  background: #24272A;
}
.table-component .table__content .table__row:nth-child(even) {
  background: #3C4147;
}
.table-component .table__content .table__cell--value h1,
.table-component .table__content .table__cell--value h2,
.table-component .table__content .table__cell--value h3,
.table-component .table__content .table__cell--value h4,
.table-component .table__content .table__cell--value h5,
.table-component .table__content .table__cell--value p,
.table-component .table__content .table__cell--value li {
  color: #DADDE0;
}
.table-component .table__content .table__cell--value p,
.table-component .table__content .table__cell--value li {
  font-family: "Hitmarker Text Regular", Arial;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 1px;
  font-size: 0.88rem;
  line-height: 1.38rem;
}
.table-component .table__content .table__cell--key {
  display: none;
}
@media (max-width: 1024px) {
  .table-component .table__content .table__row {
    padding: 16px;
    flex-direction: column;
    gap: 0;
  }
  .table-component .table__content .table__cell {
    width: unset !important;
  }
  .table-component .table__content .table__cell:not(:first-child) {
    margin-top: 8px;
  }
}
.table-component .table__content.row-padding-large .table__row {
  padding: 8px 16px;
}
.table-component .table__content.has-header-row .table__row-0 {
  font-family: "Hitmarker Text Bold", "Hitmarker Text Regular", Arial;
  font-weight: 700;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 1px;
  font-size: 0.88rem;
  line-height: 1.38rem;
  text-transform: uppercase;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.5);
}
@media (max-width: 1024px) {
  .table-component .table__content.has-header-row .table__row-0 {
    display: none;
  }
  .table-component .table__content.has-header-row .table__row:nth-child(even) {
    background: #24272A;
  }
  .table-component .table__content.has-header-row .table__row:nth-child(odd) {
    background: #3C4147;
  }
  .table-component .table__content.has-header-row .table__cell--key {
    font-family: "Hitmarker Text Bold", "Hitmarker Text Regular", Arial;
    font-weight: 700;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 1px;
    font-size: 0.88rem;
    line-height: 1.38rem;
    display: block;
    text-transform: uppercase;
    overflow-wrap: break-word;
  }
  .table-component .table__content.has-header-row.two-column .table__cell,
  .table-component .table__content.has-header-row.double-header .table__cell--content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    grid-column-gap: 16px;
  }
  .table-component .table__content.has-header-row.double-header .table__cell--header {
    font-family: "Hitmarker Condensed Black", Arial;
    font-weight: 900;
    font-style: normal;
    letter-spacing: 1px;
    font-size: 1.25rem;
    line-height: 1.25rem;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
}
@media (max-width: 600px) {
  .table-component .table__content.has-header-row.two-column .table__cell .table__cell,
  .table-component .table__content.has-header-row.double-header .table__cell--content .table__cell {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
