@import url("https://use.typekit.net/szx2ljh.css");
@font-face {
  font-family: berthold;
  src: url('https://images.rockymountainatvmc.com/images/rm/Heros/LP/Install-Center/berthold.otf') format("opentype");
}

body,
:is(div#NoNavBarPageContent, div.ux-content) {margin: 0 !important;padding: 0 !important;width: 100% !important;}
div.headerSpacing {margin: 0;}

/* RESET */
main#rm-landing *,
main#rm-landing *::before,
*::after {box-sizing: border-box;}
main#rm-landing * {margin: 0;padding: 0;font: inherit;}
html {hanging-punctuation: first last;}
main#rm-landing :is(img, picture, svg, video) {display: block;max-width: 100%;}
main#rm-landing :is(h1, h2, h3, h4, h5, h6) {text-wrap: balance;}
main#rm-landing :is(p, li) {text-wrap: pretty;}
/* RESET END */

main#rm-landing {
  --content-width: 1400px;
  --gap: 1.5rem; 
  --radius: 1rem;
  --edge-spacing: 1rem;

  --black: rgb(0 0 0);
  --red: #ce0e2d;
  --red-tusk: #e1251b;
  --grey: #333;
  --grey-2: #555;
  --light-grey: #777;
  --blue: rgb(0 0 204);
  --green: rgb(0 204 0);
  --yellow: rgb(255 255 0);
  --orange: #f67300;

  --font-tusk: "berthold", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-msr: "industry", sans-serif;

  --step--1: clamp(0.85rem, 0.8rem + 0.2vw, 0.95rem);
  --step-0: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --step-3: clamp(2rem, 1.6rem + 1.8vw, 2.75rem);
  --step-4: clamp(2rem, 1.8rem + 2.5vw, 3.5rem);
  --step-5: clamp(2.5rem, 2rem + 3.5vw, 4rem);

  --bg-initial: rgb(255 255 255 / 0);
  --bg-hover: black;
  --text-initial: black;
  --text-hover: white;

  color: var(--grey);
  display: grid;
  font-family: Helvetica, Arial, system-ui, sans-serif;
  font-size: 1.2rem !important;
  grid-template-columns: [fullWidth-start] minmax(var(--edge-spacing), 1fr) [mainContent-start] minmax(2rem, var(--content-width)) [mainContent-end] minmax(var(--edge-spacing), 1fr) [fullWidth-end];
  &>* {grid-column: mainContent;}

  &.tusk {
    --bg-initial: rgb(255 255 255 / 0);
    --bg-hover: white;
    --text-initial: white;
    --text-hover: black;

    --red: var(--red-tusk);

    background-color: var(--black);
    background: radial-gradient(color-mix(in srgb, var(--red-tusk), black 50%), black);
    background-position: center;
    color: white;
  }
  &.msr {
    background-color: white;
    font-family: "industry", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
}

main#rm-landing :is(h1, h2, h3, h4, h5, h6) {
  font-weight: bold;
  line-height: 1.1;
  margin-bottom: 0.2em;
}
main#rm-landing.tusk :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-tusk);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
}
main#rm-landing.msr :is(h1, h2, h3, h4, h5, h6) {
  font-weight: 700;
  /* font-style: italic; */
  text-transform: uppercase;
}
main#rm-landing.tusk :is(section, article, header:not(:first-of-type)):not(.wrapper) > :is(h1, h2, h3, h4, h5, h6):first-of-type,
main#rm-landing.tusk :is(section, article, header:not(:first-of-type)) .wrapper > :is(h1, h2, h3, h4, h5, h6):first-of-type {
  background: linear-gradient(90deg, color-mix(in srgb, var(--black), transparent 100%) 0%, var(--red-tusk) 20%, var(--red-tusk) 80%, color-mix(in srgb, var(--black), transparent 100%) 100%);
  color: white;
  display: block;
  padding:0.5rem 0;
  text-align: center;
}
main#rm-landing {
  & h1 {font-size: var(--step-5);}
  & h2 {font-size: var(--step-4);}
  & h3 {font-size: var(--step-3);}
  & h4 {font-size: var(--step-2);}
  & h5 {font-size: var(--step-1);}
  & h6 {font-size: var(--step-0);}
  &.tusk {
    & h1 {font-size: var(--step-3);}
    & h2 {font-size: var(--step-3);}
    & h3 {font-size: var(--step-2);}
    & h4 {font-size: var(--step-1);}
    & h5 {font-size: var(--step-1);}
    & h6 {font-size: var(--step-1);}      
  }
}

main#rm-landing i {font-style: italic;}

main#rm-landing p {max-width: 75ch;}
main#rm-landing .center + p {margin-inline: auto;}

main#rm-landing :is(section, article) {
  padding-bottom: 2rem !important;
  padding-top: 2rem !important;
}

main#rm-landing a {
  color: var(--red);
}


main#rm-landing img:has(+ :is(button, a.button)) + :is(button, a.button){margin-top: 1rem !important;}
main#rm-landing.tusk :is(button, a.button):not(.yt-play-btn, .rm-slider-dot).solid {
  --bg-initial: white;
  --bg-hover: black;
  --text-initial: black;
  --text-hover: white;
}

@property --msr-btn-1 {
  syntax: '<color>';
  initial-value: #ff8e44;
  inherits: false;
}
@property --msr-btn-2 {
  syntax: '<color>';
  initial-value: #f91362;
  inherits: false;
}
main#rm-landing.msr :is(button, a.button):not(.yt-play-btn, .rm-slider-dot, .rm-slider-tab, .rm-slider-arrow, .table-skip) {
  background-image: linear-gradient(-50deg, var(--msr-btn-1), var(--msr-btn-2));
  color: white;
  border: none;
  transition: --msr-btn-1 250ms, --msr-btn-2 250ms;
  &:hover {
    --msr-btn-1: var(--black);
    --msr-btn-2: var(--black);
  }
}

main#rm-landing :is(button, a.button):not(.yt-play-btn, .rm-slider-dot),
main#rm-landing.msr nav :is(button, a.button):not(.yt-play-btn, .rm-slider-dot, .rm-slider-tab, .rm-slider-arrow), main#rm-landing.msr .black :is(button, a.button) {
  backdrop-filter: blur(5px);
  background-color: var(--bg-initial);
  background-image: none;
  border: 1.5px solid var(--text-initial);
  border-radius: 100vw;
  color: var(--text-initial);
  display: inline-block;
  font-family: inherit;
  padding: 0.75rem 2rem;
  text-decoration: none;
  transition: background-color 250ms, color 250ms, scale 250ms, opacity 250ms;
  width: fit-content;
  &:active {
    /* opacity: 0.5; */
    outline: 2px solid var(--bg-hover);
    outline-offset: 2px;
  }
  &:hover {
    background-color: var(--bg-hover);
    color: var(--text-hover);
  }
  &:focus-visible {outline: 3px solid grey;outline-offset: 2px;}
  &.invert {
    --bg-hover: white;
    --text-initial: white;
    --text-hover: black;
  }
}
main#rm-landing :is(button, a.button):not(.yt-play-btn, .rm-slider-dot).solid {
  --bg-initial: black;
  --bg-hover: rgb(255 255 255 / 0) !important;
  --text-initial: white;
  --text-hover: black;
  border-color: var(--text-hover);
  &.red {
    --bg-initial: red;
    --bg-hover: rgb(255 255 255 / 0) !important;
    --text-initial: white;
    --text-hover: red;
  }
}

main#rm-landing p:has(~ :is(button, a.button)) {margin-bottom: 1rem;}

main#rm-landing header {
  text-align: center;
  padding: 2rem 0;
  & h1 {padding-bottom: 2rem !important;}
  &:first-of-type {padding-top: 2rem;&.cover-image {padding-top: 10rem;}}
  &:is(.black, .red, .grey) :is(h1, h2, h3, h4, h5, h6) {color: white;}
}
main#rm-landing.tusk header h1 {font-size: var(--step-5) !important;}

main#rm-landing img {border-radius: var(--radius);}

main#rm-landing .img-round img {
  aspect-ratio: 1/1 !important;
  border-radius: 100% !important;
  margin-inline: auto;
  height: auto !important;
  width: 90% !important;
}

main#rm-landing input.table-search {
  box-sizing: border-box;
  border: 1px solid var(--black);
  border-radius: 100vw;
  display: block;
  height: 2rem;
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
  margin-inline: auto !important;
  padding: 0.5rem !important;
  width: 35ch;
}
.table-search-wrap {border-radius: var(--radius);}
main#rm-landing table {
  background-color: rgb(0 0 0 / 0.25);
  border-collapse: collapse;
  border-radius: var(--radius);
  border-spacing: 0;
  font-size: clamp(0.75rem, 1.5vw, 1.1rem);
  margin: 0;
  padding: 0;
  table-layout: fixed;
  text-align: left;
  width: 100%;
  & :is(table, caption, tbody, tfoot, thead, tr, th, td) {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }
  & thead {
    border: none !important;
    color: white;
    font-weight: bold;
    top: 0;
    & th {
      background-color: var(--red);
    }
    & th:first-of-type {
      border-radius: var(--radius) 0 0 0;
    }
    & th:last-of-type {
      border-radius: 0 var(--radius) 0 0;
    }
  }
  & th, & td {padding: 1rem;}
  & :not(thead) tr {
    transition: scale 250ms;
    &:hover {scale: 1.01;}
  }
  & tr:nth-child(2n+2) {background-color: rgb(231 231 231);}
  & td {
    overflow: hidden; 
    text-overflow: ellipsis; 
    word-wrap: break-word;
  }
}
main#rm-landing.tusk input.table-search {
  border: none;
  box-shadow: 0 5px 10px rgb(0 0 0 / 0.5);
}
main#rm-landing.tusk table {
  /* background-color: black; */
  box-shadow: 0 5px 10px rgb(0 0 0 / 0.25);
  color: white;
  text-align: center;
  & thead th {
    background-color: rgb(255 255 255 / 0.7); 
    backdrop-filter: blur(5px);
    color: black;
    font-size: 1.05em;
  }
  & tr:nth-child(2n+2){background-color: rgb(255 255 255 / 0.25);}
}

main#rm-landing nav:not(:has(>.wrapper)) {
  place-self: center;
  width: fit-content;
}
main#rm-landing :is(nav:not(.wrapper), nav .wrapper) {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--gap);
  justify-content: space-around;
  padding: 1rem !important;
  & a::after {content: "" !important;}
  @media (max-width: 750px) {
         & {
            gap: 0.25rem;
            justify-content: center;
         }
      }
}

main#rm-landing .center {
  text-align: center;
  & :is(button, a.button) {margin-inline: auto;}
}

main#rm-landing .right {
  margin-left: auto;
  text-align: right;
}

main#rm-landing .full-width {
  grid-column: fullWidth;
  padding: 0 1rem;
  &>img {
    &:nth-child(odd) {
      border-radius: 0 var(--radius) var(--radius) 0;
      transform: translateX(calc(var(--edge-spacing) * -1));
    }
    &:nth-child(even) {
      border-radius: var(--radius) 0 0 var(--radius);
      transform: translateX(var(--edge-spacing));
    }
  }
  @media (max-width: 750px) {
    &>img {
      opacity: 0.5;
      border-radius: var(--radius) !important ;
      transform: translateX(0) !important;
      width: calc(100% + 2rem) !important;
    }
  }
}

main#rm-landing .full-bleed {
  display: grid;
  grid-column: fullWidth;
  grid-template-columns: [fullWidth-start] minmax(2rem, 1fr) [mainContent-start] minmax(1.5rem, var(--content-width)) [mainContent-end] minmax(2rem, 1fr) [fullWidth-end];
  &>* {grid-column: mainContent;}
  &.bleed-left.column-2 .wrapper:first-child {outline: 3px solid lime;grid-column: fullWidth-start / mainContent-end;}
  &.bleed-right.column-2 .wrapper:last-child {outline: 3px solid lime;grid-column: mainContent-start / fullWidth-end;}
  &>:is(button, a.button) {margin-left: 1em;}
}
main#rm-landing .full-bleed > .wrapper {max-width: var(--content-width);}

main#rm-landing :is(.black, .red, .grey):not(.slider span) {
  color: white;
  & :is(button, a.button):not(:is(.product-grid, .slider span) a.button) {
    --bg-hover: white;
    --text-initial: white;
    --text-hover: black;
  }
  & :is(button, a.button).solid {
    --bg-initial: black;
    --bg-hover: white;
    --text-initial: white;
    --text-hover: black;
    border-color: var(--text-hover);
  }
}
main#rm-landing .black {background-color: black;}
/* main#rm-landing.tusk .black {background-color: transparent;} */
main#rm-landing .grey {background-color: var(--grey);}
main#rm-landing .red {background-color: var(--red);}

main#rm-landing :is([class^="column-"], [class*=" column-"]):has(>div.wrapper)>div.wrapper,
main#rm-landing :is([class^="column-"], [class*=" column-"]):not(:has(>div.wrapper)) {
  display: grid;
  gap: 2rem var(--gap) !important;
  grid-template-columns: repeat(var(--columns, 2), 1fr);
  align-items: center;
  place-items: center;
  & > h1:first-child {
    grid-column: 1 / -1;
    width: 100%;
  }
  & img {width: 100%;height: auto;}
  @media (max-width: 750px) {grid-template-columns: 1fr;}
}
main#rm-landing  :is(.column-2:not(.wrapper), .column-2 .wrapper) {--columns: 2;}
main#rm-landing :is(.column-3:not(.wrapper), .column-3 .wrapper) {
  --columns: 3;
  & :is(h1, h2, h3, h4, h5, h6) {font-size: var(--step-3);}
}
main#rm-landing :is(.column-4:not(.wrapper), .column-4 .wrapper) {
  --columns: 4;
  & :is(h1, h2, h3, h4, h5, h6) {font-size: var(--step-2);}
  @media (max-width: 750px) {grid-template-columns: 1fr 1fr !important;}
}
@media (max-width: 750px) {
  main#rm-landing .column-4 .wrapper {padding: 0 2rem;}
}

main#rm-landing .gallery {height: fit-content;}
main#rm-landing :is(
section.gallery:not(:has(> div.wrapper)),
section.gallery:has(> div.wrapper) > div.wrapper) {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto;
  gap: 1rem;
  & > h1:first-child {
    align-self: start;
    aspect-ratio: auto;
    height: fit-content;
    grid-column: 1 / -1;
    text-align: center;
  }
  & > :is(img, div) {
    aspect-ratio: 1 / 1;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    display: block;
  }
  & > img, & > div > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;}
  & > .half {grid-column: span 2;}
  & > .three-quarter {grid-column: span 3;}
  & > .full {grid-column: 1 / -1;}
  & > :is(.half, .three-quarter, .full) {aspect-ratio: auto;min-height: 100%;}
  & > div:not(.wrapper) {
    background-color: white;
    background-image: linear-gradient(to top, color-mix(in hsl, var(--overlay-color), transparent 5%), color-mix(in hsl, var(--overlay-color), transparent 75%)), var(--cover-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: var(--radius);
    color: white;
    display: grid;
    font-weight: bold;
    height: 100%;
    place-content: center;
    text-align: center;
    text-transform: uppercase;
  }
  @media (max-width: 750px) {
    grid-template-columns: repeat(2, 1fr);
    & > .three-quarter,& > .full {grid-column: 1 / -1;aspect-ratio: 2/1;}
    & :last-child {grid-column: 1 / -1;}
  }
}

main#rm-landing .cover-image {
  background-image: linear-gradient(rgb(0 0 0 / 0.25) 50%, rgb(0 0 0 / 0.5)), var(--cover-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* color: black !important; */
  &.black {background-image: linear-gradient(rgb(0 0 0 / 0.5) 50%, black), var(--cover-image);}
  &.red {background-image: linear-gradient(rgb(204 0 0 / 0.5) 50%, var(--red)), var(--cover-image);}
  &.grey {background-image: linear-gradient(rgb(51 51 51 / 0.5) 50%, var(--grey)), var(--cover-image);}
}

main#rm-landing :is(.product-grid:not(:has(> .wrapper)), .product-grid div.wrapper){
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
  height: fit-content;
  justify-content: center;
  & > h1:first-of-type {flex-basis: 100%;text-align: center;}
  & div:not(.wrapper) {
    background-color: white;
    border: 1px solid rgb(0 0 0 / 0.1);
    border-radius: var(--radius);
    display: grid;
    flex: 1 0 calc(25% - var(--gap));
    max-width: calc(25% - (var(--gap) / 4));
    gap: 0.5rem;
    grid-template-areas: "brand" "product" "swatch" "title" "price" "details" "button";
    overflow: hidden;
    position: relative;
    text-align: center;
    transition: border-color 150ms, scale 250ms;
    &[data-tag]::after{
      --tag: var(--red);
      backdrop-filter: blur(10px);
      background-color: var(--tag);
      content: attr(data-tag);
      border: 1px solid white;
      border-radius: calc(var(--radius) / 3);
      color: white;
      display: block;
      font-weight: bold;
      font-size: 0.85em;
      grid-area: product;
      padding: 0.25rem 0.75rem;
      text-transform: uppercase;
      position: absolute;
      bottom: 1rem;
      /* left: 1rem; */
      left: 50%;
      transform: translateX(-50%);
      @media (max-width: 750px) {
        font-size: 0.65em;
        padding: 0.25rem;
        bottom: -0.35rem;
      }
    }
    &[data-tag=closeout]::after {--tag: var(--blue);}
    &[data-tag=deal]::after {--tag: var(--green);}
    &[data-tag=rebate]::after {--tag: var(--black);}
    &[data-tag=limited]::after {background-color: var(--orange);}
    /* &[data-tag=closeout] p::before {
      content: "Closeout Price";
      color: var(--blue);
      display: inline-block;
      font-size: 0.75em;
      transform: translateY(-0.1em) translateX(-0.25rem);
    } */
    &:hover {border-color: rgb(0 0 0 / 0.35);}
    &>* {margin: 0 !important;&:not(a.button){padding: 0;}}
    & > img:has(+ img):first-of-type {
      border-radius: 0;
      grid-area: brand;
      place-self: center;
      max-width: 80px;
      margin-top: 1rem !important;
      
    }
    & > img {
      border-radius: 0;
      &:not(img ~ img):only-of-type {padding-top: 0.45rem;}
      &:last-of-type {grid-area: product;padding: 0 1rem;}
    }
    & span.swatch {
      display: flex;
      flex-direction: row;
      gap: 0.5rem;
      grid-area: swatch;
      height: 45px;
      overflow-x: scroll;
      place-content: center;
      width: 100%;
      &>* {
        border-radius: calc(var(--radius) / 3);
        cursor: pointer;
        transition: scale 250ms;
        &:hover {
          outline: 1px solid black;
          outline-offset: -1px;
        }
      }
      @media (max-width: 750px) {
        & {
          padding: 0 0.5rem;
          place-content: start;
        }
      }
    }

    & :is(h1, h2, h3, h4, h5, h6) {
      color: var(--grey);
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-size: var(--step-0);
      grid-area: title;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      position: relative;
      width: 100%;
    }
    & p {
      color: var(--red);
      font-weight: bold;
      grid-area: price;
      padding: 0.5rem 0;
    }
    & i {
      color: var(--light-grey);
      font-size: var(--step--1);
      grid-area: details;
    }
    & a.button {
      --bg-initial: rgb(255 255 255 / 0);
      --bg-hover: black;
      --text-initial: black;
      --text-hover: white;
      grid-area: button;
      margin-inline: auto !important;
      margin-bottom: 1rem !important;
    }
    @media (max-width: 750px) {
      flex: 1 0 calc(50% - var(--gap));
      max-width: calc(50% - (var(--gap) / 2));
    }
  }
  &.product-horizontal div:not(.wrapper) {
    flex: 1 0 calc(33% - var(--gap));
    max-width: calc(33% - (var(--gap) / 3));
    grid-template-areas: "product brand" "product title" "product price" "product swatch" "product details" "product button";
    grid-template-columns: 48% auto;
    padding: 1rem 0;
    place-items: center;
    @media (max-width: 950px) {
      flex: 1 0 calc(50% - var(--gap));
      max-width: calc(50% - (var(--gap) / 2));
    }
    @media (max-width: 750px) {
      flex: 1 0 100%;
      max-width: 100%;
    }
  }
}
main#rm-landing .black :is(.product-grid :not(div.wrapper), .product-grid div.wrapper) div:hover {border-color: white;}
main#rm-landing.msr :is(.product-grid:not(:has(> .wrapper)), .product-grid div.wrapper) div{
  font-weight: 700;
  & :is(h1, h2, h3, h4, h5, h6) {
    font-family: "industry" , sans-serif;
    font-weight: 700;
    font-style: normal;
  }
}

main#rm-landing img:has(+ :is(p, h1, h2, h3, h4, h5, h6)) + :is(p, h1, h2, h3, h4, h5, h6) {padding-top: 1rem;}

main#rm-landing .space {
  display: block;
  height: 5rem;
}
main#rm-landing hr {
  /* border-top: 1px solid var(--light-grey); */
  border: none;
  background-image: linear-gradient(to right, transparent, color-mix(in srgb, var(--light-grey), transparent 50%), transparent);
  height: 2px;
  margin: 1rem auto;
  width: 85%;
}
main#rm-landing.tusk hr {
  background: linear-gradient(90deg, color-mix(in srgb, var(--black), transparent 100%) 0%, var(--red-tusk) 20%, var(--red-tusk) 80%, color-mix(in srgb, var(--black), transparent 100%) 100%);
  height: 10px;
}

main#rm-landing :is(h1, h2, h3, h4, h5, h6):has(+ .sub-heading) + .sub-heading {margin-top: -0.75rem;}
main#rm-landing .sub-heading {
  color: var(--light-grey);
  display: block;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  &:has(+ p) {padding-bottom: 1rem !important;}
}

main#rm-landing .promo.black:has(>.wrapper) .wrapper>div {color: black;}

main#rm-landing :is(.promo:not(:has(>.wrapper)), .promo:has(>.wrapper) .wrapper) {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  height: fit-content;
}
main#rm-landing :is(.promo:not(:has(>.wrapper)), .promo:has(>.wrapper) .wrapper)>div{
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: repeat(3, auto);
  height: 100%;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  &>:is(img, picture) {
    grid-area: 1 / 1 / 4 / 4;
    height: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: cover;
    width: 100%;
    z-index: -1;
  }
  &>span {
    grid-area: 1 / 1 / 2 / 2;
    padding: 2rem;
  }
  & :is(.top-left, .left-top) {grid-area: 1 / 1 / 2 / 2 !important;place-content: start;}
  & :is(.top-center, .center-top) {grid-area: 1 / 2 / 2 / 3 !important;place-content: start;text-align: center;}
  & :is(.top-right, .right-top) {grid-area: 1 / 3 / 2 / 4 !important;place-content: start;text-align: right;}
  & :is(.middle-left, .left-middle) {grid-area: 2 / 1 / 3 / 2 !important;place-content: center;}
  & :is(.middle-center, .center-middle) {grid-area: 2 / 2 / 3 / 3 !important;place-content: center;text-align: center;}
  & :is(.middle-right, .right-middle) {grid-area: 2 / 3 / 3 / 4 !important;place-content: center;text-align: right;}
  & :is(.bottom-left, .left-bottom) {grid-area: 3 / 1 / 4 / 2 !important;place-content: end;}
  & :is(.bottom-center, .center-bottom) {grid-area: 3 / 2 / 4 / 3 !important;place-content: end;text-align: center;}
  & :is(.bottom-right, .right-bottom) {grid-area: 3 / 3 / 4 / 4 !important;place-content: end;text-align: right;}
  @media (max-width: 750px) {
    & :is(.m-top-left, .m-left-top) {grid-area: 1 / 1 / 2 / 2 !important;place-content: start;}
    & :is(.m-top-center, .m-center-top) {grid-area: 1 / 2 / 2 / 3 !important;place-content: start;text-align: center;}
    & :is(.m-top-right, .m-right-top) {grid-area: 1 / 3 / 2 / 4 !important;place-content: start;text-align: right;}
    & :is(.m-middle-left, .m-left-middle) {grid-area: 2 / 1 / 3 / 2 !important;place-content: center;}
    & :is(.m-middle-center, .m-center-middle) {grid-area: 2 / 2 / 3 / 3 !important;place-content: center;text-align: center;}
    & :is(.m-middle-right, .m-right-middle) {grid-area: 2 / 3 / 3 / 4 !important;place-content: center;text-align: right;}
    & :is(.m-bottom-left, .m-left-bottom) {grid-area: 3 / 1 / 4 / 2 !important;place-content: end;}
    & :is(.m-bottom-center, .m-center-bottom) {grid-area: 3 / 2 / 4 / 3 !important;place-content: end;text-align: center;}
    & :is(.m-bottom-right, .m-right-bottom) {grid-area: 3 / 3 / 4 / 4 !important;place-content: end;text-align: right;}
  }
}

/* YT VIDEO STYLING */
main#rm-landing .yt-wrapper {
    border-radius: var(--radius);
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    transition: scale 250ms;
    &:hover .yt-play-btn {scale: 1.05;}
}
main#rm-landing .yt-wrapper iframe {
    width: 100%;
    height: 100%;
    border: 0;
}
main#rm-landing .yt-overlay {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: opacity 0.3s ease;
    z-index: 2;
}
main#rm-landing .yt-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}
main#rm-landing .yt-play-btn {
    border-radius: var(--radius);
    display: block;
    width: 100px;
    height: 72px;
    background: rgb(255 0 0);
    border: none;
    position: relative;
    transition: scale 350ms;
    cursor: pointer;
}
main#rm-landing .yt-play-btn::before {
    content: "";
    position: absolute;
    left: 40px;
    top: 20px;
    border-style: solid;
    border-width: 16px 0 16px 26px;
    border-color: transparent transparent transparent white;
}
/* YT VIDEO STYLING END */

/* SLIDER STYLING START */
main#rm-landing.tusk .slider {
  color: black;
  & :is(a.button, button) {
    --bg-initial: black;
    --bg-hover: white;
    --text-initial: white;
    --text-hover: black;
  }
}
main#rm-landing .slider:is(.black, .red, .grey) span{color: black;}
main#rm-landing .slider div.rm-slider-slide{
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: repeat(3, auto);
  width: 100%;
  & :is(.top-left, .left-top) {grid-area: 1 / 1 / 2 / 2 !important;place-content: start;}
  & :is(.top-center, .center-top) {grid-area: 1 / 2 / 2 / 3 !important;place-content: start;text-align: center;}
  & :is(.top-right, .right-top) {grid-area: 1 / 3 / 2 / 4 !important;place-content: start;text-align: right;}
  & :is(.middle-left, .left-middle) {grid-area: 2 / 1 / 3 / 2 !important;place-content: center;}
  & :is(.middle-center, .center-middle) {grid-area: 2 / 2 / 3 / 3 !important;place-content: center;text-align: center;}
  & :is(.middle-right, .right-middle) {grid-area: 2 / 3 / 3 / 4 !important;place-content: center;text-align: right;}
  & :is(.bottom-left, .left-bottom) {grid-area: 3 / 1 / 4 / 2 !important;place-content: end;}
  & :is(.bottom-center, .center-bottom) {grid-area: 3 / 2 / 4 / 3 !important;place-content: end;text-align: center;}
  & :is(.bottom-right, .right-bottom) {grid-area: 3 / 3 / 4 / 4 !important;place-content: end;text-align: right;}
}
main#rm-landing .rm-slider-heading {margin: 0 0 1rem;}
main#rm-landing .rm-slider-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
main#rm-landing .rm-slider-topbar > h1 {
  margin: 0;
}
main#rm-landing .rm-slider-tabs {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
main#rm-landing .rm-slider-arrow-wrap {
  display: flex;
  gap: .5rem;
  flex-shrink: 0;
}
main#rm-landing .rm-slider-arrow:disabled {
  opacity: .35;
  cursor: default;
  pointer-events: none;
}
main#rm-landing .rm-slider-track {
  display: flex;
  gap: var(--slider-gap, 1rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
main#rm-landing .rm-slider-track::-webkit-scrollbar {display: none;}
main#rm-landing .rm-slider-slide {
  --slide-ratio: 16/9;
  flex: 0 0 85%;
  aspect-ratio: var(--slide-ratio, 16 / 9);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  scroll-snap-align: center;
  padding: 1.5rem;
}
main#rm-landing .rm-slider-slide:first-child {scroll-snap-align: start;}
main#rm-landing .rm-slider-dots {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: 1rem;
}
main#rm-landing .rm-slider-dot {
  background-color: white;
  border: 2px solid black;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  padding: 0;
  transition: border-color 250ms, opacity 250ms;
}
main#rm-landing .rm-slider-dot:hover {background-color: black;cursor: pointer;}
main#rm-landing .rm-slider-dot, main#rm-landing .rm-slider-tab {opacity: .45;}
main#rm-landing :is(.rm-slider-dot, .rm-slider-tab)[aria-current="true"]{opacity: 1;}
@media (max-width: 750px) {
  main#rm-landing .rm-slider-slide {flex: 0 0 100%;}
  main#rm-landing .rm-slider-tabs {display: none;}
  main#rm-landing .rm-slider-arrow-wrap {margin-left: auto;}
  main#rm-landing .rm-slider-topbar {flex-wrap: wrap;}
  main#rm-landing .rm-slider-topbar > h1 {
    flex: 0 0 100%;
    order: -1;
    margin-bottom: .5rem;
  }
  main#rm-landing .rm-slider-arrow-wrap {width: 100%;justify-content: flex-end;}
}
/* SLIDER STYLING END */

main#rm-landing .callouts {
  display: grid;
  gap: var(--gap);
  grid-column: fullWidth;
  grid-template-columns: 55% 1fr;
  & div:has(img) img{
    max-height: 90vh !important;
    margin-left: auto;
    width: auto;
  }
  & img {
    /* border-radius: 0 var(--radius) var(--radius) 0; */
    /* width: 100%; */
    @media (max-width: 750px) {
      border-radius: 0;
    }
  }
  & img:not(:first-of-type) {display: none;}
  & div:not(:has(> img)) {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    place-content: center;
    & span {
      background-color: lightgray;
      border-left: 8px solid var(--red);
      display: block;
      font-size: 1.1em;
      margin-left: auto;
      padding: 2rem 1rem;
      transition: background-color 250ms, border 300ms, width 350ms;
      min-width: 300px !important;
      width: 90%;
      &.active {
        background-color: var(--red);
        color: white;
        width: 91%;
      }
    }
  }
  @media (max-width: 850px) {
    & {grid-template-columns: 1fr;}
  }
}
main#rm-landing.tusk .callouts {
   & div:not(:has(> img)) span {
      background-color: var(--black);
      border-left: 8px solid var(--red);
      display: block;
      isolation: isolate;
      &.active {
        background-color: color-mix(in srgb, var(--red-tusk), transparent 80%);
        border-left: 8px solid var(--red);
        position: relative;
      }
   }
}
main#rm-landing.msr .callouts {
  --msr-callout-color: var(--msr-btn-1);
   & div:not(:has(> img)) span {
      background-color: lightgray;
      border-left: 8px solid var(--msr-callout-color);
      &.active {
        background-color: color-mix(in srgb, var(--msr-callout-color), transparent 20%);
        border-left: 8px solid var(--msr-callout-color);
        color: black;
      }
   }
}