.myoslim-solution-gateway,
.myoslim-solution-gateway * { box-sizing: border-box; }

.myoslim-solution-gateway {
  padding: 104px 0 112px;
  background: #f4f1ec;
  color: #151515;
}

.myoslim-solution-gateway__inner { width: min(1380px, calc(100% - 64px)); margin: 0 auto; }
.myoslim-solution-gateway__heading { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); gap: 64px; align-items: end; margin-bottom: 48px; }
.myoslim-solution-gateway__heading .eyebrow { margin: 0 0 16px; color: #8b7047; }
.myoslim-solution-gateway__heading h2 { max-width: 820px; margin: 0; color: #151515; font-size: clamp(38px, 4.2vw, 68px); line-height: 1.02; letter-spacing: 0; }
.myoslim-solution-gateway__heading > p { max-width: 480px; margin: 0 0 6px; color: #716c65; font-size: 17px; line-height: 1.65; }

.myoslim-solution-gateway__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.myoslim-solution-gateway__card { position: relative; display: block; min-width: 0; aspect-ratio: 1.18 / 1; overflow: hidden; border-radius: 6px; background: #202020; color: #f4f1ec; text-decoration: none; isolation: isolate; }
.myoslim-solution-gateway__card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2,.75,.25,1); }
.myoslim-solution-gateway__shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(21,21,21,.04) 28%, rgba(21,21,21,.82) 100%); }
.myoslim-solution-gateway__copy { position: absolute; z-index: 2; left: 28px; right: 64px; bottom: 26px; display: flex; flex-direction: column; }
.myoslim-solution-gateway__copy small { margin-bottom: 7px; color: #e0be80; font-size: 11px; font-weight: 700; line-height: 1.2; text-transform: uppercase; }
.myoslim-solution-gateway__copy strong { color: #f4f1ec; font-size: clamp(21px, 1.8vw, 30px); font-weight: 600; line-height: 1.12; }
.myoslim-solution-gateway__copy em { margin-top: 8px; color: rgba(244,241,236,.76); font-size: 13px; font-style: normal; line-height: 1.35; }
.myoslim-solution-gateway__arrow { position: absolute; right: 24px; bottom: 27px; z-index: 2; color: #e0be80; font-size: 25px; line-height: 1; transition: transform .25s ease; }
.myoslim-solution-gateway__card:hover img, .myoslim-solution-gateway__card:focus-visible img { transform: scale(1.045); }
.myoslim-solution-gateway__card:hover .myoslim-solution-gateway__arrow, .myoslim-solution-gateway__card:focus-visible .myoslim-solution-gateway__arrow { transform: translate(3px, -3px); }
.myoslim-solution-gateway__card:focus-visible { outline: 3px solid #c8a875; outline-offset: 3px; }

@media (max-width: 980px) {
  .myoslim-solution-gateway { padding: 76px 0 84px; }
  .myoslim-solution-gateway__inner { width: min(calc(100% - 40px), 760px); }
  .myoslim-solution-gateway__heading { grid-template-columns: 1fr; gap: 20px; margin-bottom: 36px; }
  .myoslim-solution-gateway__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}

@media (max-width: 600px) {
  .myoslim-solution-gateway { padding: 58px 0 64px; }
  .myoslim-solution-gateway__inner { width: calc(100% - 28px); }
  .myoslim-solution-gateway__heading { margin-bottom: 28px; }
  .myoslim-solution-gateway__heading h2 { font-size: 34px; }
  .myoslim-solution-gateway__heading > p { font-size: 15px; }
  .myoslim-solution-gateway__grid { gap: 10px; }
  .myoslim-solution-gateway__card { aspect-ratio: .82 / 1; border-radius: 4px; }
  .myoslim-solution-gateway__copy { left: 14px; right: 14px; bottom: 14px; }
  .myoslim-solution-gateway__copy small { margin-bottom: 5px; font-size: 9px; }
  .myoslim-solution-gateway__copy strong { padding-right: 25px; font-size: 17px; line-height: 1.16; }
  .myoslim-solution-gateway__copy em { display: none; }
  .myoslim-solution-gateway__arrow { right: 13px; bottom: 15px; font-size: 19px; }
}