.full-screen {
  height: calc(var(--vh, 1vh) * 100);
}
@media (min-width: 992px) {
	.g-font-size-50--lg {
		font-size: 3.57143rem !important; 
	}	
	.g-width-55x--lg {
		width: 55%;
	}
}

/*with video*/
/* Default: Desktop Style (video background) */
.hero-section {
  position: relative;
  width: 130vw;
  height: 60vh;
  overflow: hidden;
}

/* .hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  width: auto;
  height: auto;
  z-index: 0;
} */

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.video-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);  
  z-index: -1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 600px;
  padding: 40px;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  margin-left: 5%;
}

.buttonpos{
	position:relative;
	left: -260px;
}	

.center-wrapper {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media (min-width:768px) and (max-width:991px){	
	.center-wrapper {
	  position: absolute;
	  top: 55%;
	  left: 57%!important;
	  transform: translate(-50%, -50%);
	}
}

/* === Mobile Styles === */
@media (max-width: 768px) {
	.hero-video {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 110%;
	  object-fit: cover;
	  z-index: -1;
	}
    .hero-section {
	  position: relative;
	  width: auto;
	  height: 40vh;
	  overflow: hidden;
	}
	.buttonpos{
		position:relative!important;
		left: 0px;		
	}
	.center-wrapper {
	  position: absolute;
	  top: 55%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	}
}
/*with video*/

.hero-button {
  background: linear-gradient(to right, #A1CB48 0%, #21A5AC 100%) !important;
  color: #fff;
  border-radius:15px;
  font-size:16px;
}

.hero-button:hover {
  background: linear-gradient(to right, #21A5AC  0%, #A1CB48 100%) !important;
  color: #fff;
  text-decoration:none;
}

.pagetagline{
	color:white;
	font-size:48px;
	font-weight:700;
	max-width: 640px;
	line-height: 65px;
}

.pagetaglineinfo{
	color:white;
	font-size:20px;
	font-weight:400;
	max-width: 575px;
    text-align: center;
}

@media (max-width: 768px) {
	.pagetagline{
		color:white;
		font-size:28px!important;
		font-weight:700;
		max-width: 600px;
		line-height:40px;
	}

	.pagetaglineinfo{
		color:white;
		font-size:16px!important;
		font-weight:400;
		max-width: 600px;
	}
}		

.u-btn-money-gradient-v1 {
    color: #fff;
    background: linear-gradient(to right, #A1CB48 0%, #21A5AC 100%) !important;
    /* background: linear-gradient(to right, #f34769 0%, #fd910e 100%) !important; */
}

.u-btn-money-gradient-v2 {
    color: #fff;
    background: linear-gradient(to right, #A1CB48 0%, #21A5AC 100%) !important;
    /* background: linear-gradient(to right, #f34769 0%, #fd910e 100%) !important; */
	border-radius:15px;
	font-size:16px;
}

.u-btn-money-gradient-v2:hover {
    color: #fff;
    background: linear-gradient(to right, #A1CB48 0%, #21A5AC 100%) !important;
    /* background: linear-gradient(to right, #f34769 0%, #fd910e 100%) !important; */
	border-radius:15px;
	font-size:16px;
	text-decoration:none;
}

/*carousel*/



.swiper-slide img {
	width: 100% !important;
	/* border-radius: 15px; */
	display: block;
}

.swiper {
  /* overflow: hidden; */ /* Remove or comment this out */
  position: relative; /* Ensure positioning works for arrows */
}

/* Arrow common styling */
.swiper-button-prev,
.swiper-button-next {
  top: 50%;   /* vertical center */
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  border-radius: 50%;
  z-index: 10;
}

/* Keep arrows just inside container edges */
.swiper-button-prev {
  left: 10px;
}
.swiper-button-next {
  right: 10px;
}

/* Optional: smaller arrow icon */
.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 16px;
}

@media screen and (min-width: 1024px) {
  .swiper-button-prev,
  .swiper-button-next,
  .swiper-pagination {
    display: none !important;
  }
}

/*carousel*/

.hero-section{
  position:relative;
  overflow:hidden;
  min-height:clamp(320px,38vw,530px);
  display:flex;
  align-items:center;
}

/* replaces .hero-video */
.hero-media,
.hero-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center right;   /* keeps the star in frame */
}
@media (max-width:767.98px){
  .hero-media img{object-position:center}
}

.video-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(6,24,58,.55) 0%,rgba(6,24,58,.15) 55%,rgba(6,24,58,0) 100%);
}
@media (max-width:767.98px){
  .video-overlay{background:rgba(6,24,58,.4)}  /* even wash, text stays legible */
}

.center-wrapper{position:relative;z-index:2}


/* ---------- HERO ------------------------------------------------------- */

.lw-hero{
  --lw-hero-h: clamp(380px, 40vw, 600px);   /* hero height */
  --lw-hero-shift: 10px;                    /* + moves content down, - moves it up */

  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;                       /* vertical centring does the work now */
  /* min-height:var(--lw-hero-h); */
  min-height:475px;
  padding-block:clamp(40px,6vw,64px) clamp(52px,7vw,78px);
  color:#fff;
 /*  background:
    radial-gradient(120% 140% at 78% 42%, #1d6fc2 0%, rgba(29,111,194,0) 55%),
    radial-gradient(90% 120% at 12% 8%, #123a78 0%, rgba(18,58,120,0) 60%),
    linear-gradient(135deg,#0a2352 0%,#0e3a7d 45%,#124a95 100%); */
  background:url('https://imgcdn.myt.mu/mytmoney/winners-mytmoney02.jpg');
  background-position:center;  
  /* border-bottom-left-radius:50% 42px;
  border-bottom-right-radius:50% 42px; */
}

.lw-hero__art{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

.lw-hero > .container{
  position:relative;
  z-index:2;
  width:100%;                               /* needed: it's a flex child now */
  transform:translateY(var(--lw-hero-shift));
}

.lw-crumbs{
  font-size:.9rem;
  margin-bottom:clamp(14px,2.5vw,22px);
  color:rgba(255,255,255,.75);
}
.lw-crumbs a{color:rgba(255,255,255,.75);text-decoration:none}
.lw-crumbs a:hover{color:#fff;text-decoration:underline}
.lw-crumbs span[aria-current]{color:#fff;font-weight:500}

.lw-hero h1{
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.3;
  font-size:clamp(1.75rem,5.2vw,3.1rem);
  margin:0 0 .6rem;
  max-width:17ch;
}

.lw-hero__lead{
  font-size:clamp(.95rem,2.4vw,1.075rem);
  line-height:1.55;
  color:rgba(255,255,255,.88);
  max-width:46ch;
  margin:0 0 clamp(18px,3vw,26px);
}

.lw-btn-ghost{
  display:inline-block;
  padding:.68rem 1.6rem;
  border:1.5px solid rgba(255,255,255,.85);
  border-radius:999px;
  color:#fff;
  font-weight:500;
  font-size:1rem;
  text-decoration:none;
  transition:background-color .2s ease,color .2s ease;
}
.lw-btn-ghost:hover,
.lw-btn-ghost:focus-visible{background:#fff;color:#000}

@media (max-width:767.98px){
  .lw-hero{
    /* --lw-hero-h: clamp(340px, 78vw, 430px);
    --lw-hero-shift: 6px;
    padding-block:clamp(32px,8vw,48px) clamp(44px,10vw,60px); */
    /* border-bottom-left-radius:50% 26px; */
    /* border-bottom-right-radius:50% 26px; */
	background:url('https://imgcdn.myt.mu/mytmoney/winners-mytmoney02.jpg');
    background-position:center;
	min-height:300px;
  }
  .lw-hero h1{max-width:none}
}

/* ========================================
LOTTERY WINNERS
======================================== */

.lottery-winners {
padding: 60px 0;
background: #f7f9fc;
font-family: 'Poppins', sans-serif;
}

.lottery-winners__head {
text-align: center;
margin-bottom: 35px;
}

.lottery-winners__eyebrow {
display: inline-block;
margin-bottom: 8px;
font-size: 14px;
font-weight: 600;
letter-spacing: 1.5px;
color: #0066ff;
}

.lottery-winners__head h2 {
margin: 0 0 8px;
font-size: 38px;
line-height: 1.25;
font-weight: 700;
color: #172033;
}

.lottery-winners__head p {
margin: 0;
font-size: 17px;
color: #697386;
}

/* ========================================
TABLE
======================================== */

.lottery-table-wrap {
max-width: 1000px;
margin: 0 auto;
background: #fff;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 8px 30px rgba(20, 35, 60, 0.08);
}

.lottery-table {
width: 100%;
border-collapse: collapse;
font-family: 'Poppins', sans-serif;
}

.lottery-table thead {
background: #172033;
}

.lottery-table th {
padding: 20px 26px;
color: #fff;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .7px;
text-align: left;
}

.lottery-table td {
padding: 20px 26px;
border-bottom: 1px solid #edf0f5;
vertical-align: middle;
font-size: 16px;
}

.lottery-table tbody tr:last-child td {
border-bottom: 0;
}

.lottery-table tbody tr {
transition: background .2s ease;
}

.lottery-table tbody tr:hover {
background: #f8faff;
}

/* ========================================
COLUMN WIDTHS
======================================== */

.lottery-table .col-prize {
width: 30%;
}

.lottery-table .col-value {
width: 22%;
}

.lottery-table .col-ticket {
width: 23%;
}

.lottery-table .col-winner {
width: 25%;
}

/* ========================================
PRIZE NUMBER
======================================== */

.prize-number {
display: inline-flex;
align-items: center;
justify-content: center;

```
width: 38px;
min-width: 38px;
height: 38px;
min-height: 38px;

margin-right: 10px;
padding: 0;

border-radius: 50%;

background: #f1f4f8;
color: #697386;

font-family: 'Poppins', sans-serif;
font-size: 12px;
font-weight: 600;
line-height: 1;

flex-shrink: 0;
box-sizing: border-box;

vertical-align: middle;
```

}

.prize-name {
font-size: 16px;
font-weight: 600;
color: #172033;
vertical-align: middle;
}

/* ========================================
MEDALS
======================================== */

.medal {
display: inline-flex;
align-items: center;
justify-content: center;


width: 25px;
height: 25px;

margin-right: 7px;

border-radius: 50%;

color: #fff;
font-size: 11px;
font-weight: 700;

line-height: 1;
vertical-align: middle;


}

/* Gold */

.medal-gold {
background: #d9a928;
box-shadow: 0 2px 7px rgba(180, 130, 20, .25);
}

/* Silver */

.medal-silver {
background: #9da5b0;
box-shadow: 0 2px 7px rgba(80, 90, 105, .20);
}

/* Bronze */

.medal-bronze {
background: #b87345;
box-shadow: 0 2px 7px rgba(130, 75, 35, .20);
}

/* ========================================
TOP 3 PRIZES
======================================== */

/* 1st */

.lottery-table tbody tr.first-prize {
background: #fffaf0;
}

.lottery-table tbody tr.first-prize .prize-number {
width: 48px;
min-width: 48px;
height: 48px;
min-height: 48px;


background: #f5c542;
color: #fff;

font-size: 15px;
font-weight: 700;

box-shadow: 0 4px 12px rgba(180, 130, 20, .20);


}

.lottery-table tbody tr.first-prize .prize-name {
color: #9a6b00;
font-size: 18px;
font-weight: 700;
}

.lottery-table tbody tr.first-prize td strong {
font-size: 21px;
color: #9a6b00;
}

/* 2nd */

.lottery-table tbody tr.second-prize {
background: #f7f8fa;
}

.lottery-table tbody tr.second-prize .prize-number {
width: 44px;
min-width: 44px;
height: 44px;
min-height: 44px;


background: #aeb5bf;
color: #fff;

font-size: 14px;
font-weight: 700;

box-shadow: 0 4px 10px rgba(80, 90, 105, .15);


}

.lottery-table tbody tr.second-prize .prize-name {
color: #596273;
font-size: 17px;
font-weight: 700;
}

.lottery-table tbody tr.second-prize td strong {
font-size: 20px;
color: #596273;
}

/* 3rd */

.lottery-table tbody tr.third-prize {
background: #fff8f3;
}

.lottery-table tbody tr.third-prize .prize-number {
width: 42px;
min-width: 42px;
height: 42px;
min-height: 42px;


background: #bd8050;
color: #fff;

font-size: 14px;
font-weight: 700;

box-shadow: 0 4px 10px rgba(130, 75, 35, .15);
```

}

.lottery-table tbody tr.third-prize .prize-name {
color: #9b5a2b;
font-size: 17px;
font-weight: 700;
}

.lottery-table tbody tr.third-prize td strong {
font-size: 20px;
color: #9b5a2b;
}

/* ========================================
TICKET
======================================== */

.ticket-no {
font-size: 16px;
font-weight: 600;
color: #172033;
letter-spacing: .5px;
}

/* ========================================
WINNER
======================================== */

.winner-name {
font-size: 16px;
font-weight: 600;
color: #172033;
}

/* ========================================
MOBILE
======================================== */

@media (max-width: 767px) {

```
.lottery-winners {
    padding: 40px 15px;
}

.lottery-winners__head {
    margin-bottom: 25px;
}

.lottery-winners__head h2 {
    font-size: 28px;
}

.lottery-winners__head p {
    font-size: 14px;
}


/* Remove table container styling */

.lottery-table-wrap {
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.lottery-table,
.lottery-table tbody {
    display: block;
    width: 100%;
}

.lottery-table thead {
    display: none;
}


/* Winner card */

.lottery-table tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;

    margin-bottom: 12px;
    padding: 18px;

    background: #fff;
    border-radius: 14px;

    box-shadow: 0 5px 18px rgba(20, 35, 60, .07);
}

.lottery-table tbody tr:hover {
    background: #fff;
}


/* Top 3 mobile backgrounds */

.lottery-table tbody tr.first-prize {
    background: #fffaf0;
}

.lottery-table tbody tr.second-prize {
    background: #f7f8fa;
}

.lottery-table tbody tr.third-prize {
    background: #fff8f3;
}


.lottery-table td {
    display: block;
    padding: 0;
    border: 0;
    font-size: 14px;
}


/* Labels */

.lottery-table td::before {
    display: block;
    margin-bottom: 5px;

    content: attr(data-label);

    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;

    color: #8a94a6;
}


/* Prize row */

.lottery-table td:first-child {
    grid-column: 1 / -1;

    padding-bottom: 12px;

    border-bottom: 1px solid #edf0f5;
}

.lottery-table td:first-child::before {
    display: none;
}


/* Mobile prize number */

.prize-number,
.lottery-table tbody tr.first-prize .prize-number,
.lottery-table tbody tr.second-prize .prize-number,
.lottery-table tbody tr.third-prize .prize-number {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;

    font-size: 11px;
}


/* Mobile medal */

.medal {
    width: 22px;
    height: 22px;

    margin-right: 6px;

    font-size: 10px;
}


/* Mobile prize text */

.prize-name,
.lottery-table tbody tr.first-prize .prize-name,
.lottery-table tbody tr.second-prize .prize-name,
.lottery-table tbody tr.third-prize .prize-name {
    font-size: 15px;
}


/* Mobile value */

.lottery-table td strong,
.lottery-table tbody tr.first-prize td strong,
.lottery-table tbody tr.second-prize td strong,
.lottery-table tbody tr.third-prize td strong {
    font-size: 15px;
}


.ticket-no,
.winner-name {
    font-size: 14px;
}

}


/* ---------- RESULTS SECTION -------------------------------------------- */

.lw-results{padding:clamp(38px,6vw,66px) 0 clamp(40px,6vw,72px)}

.lw-eyebrow{
  text-align:center;
  color:#2f8ed6;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:0 0 .5rem;
}
.lw-title{
  text-align:center;
  font-weight:700;
  letter-spacing:-.015em;
  /* font-size:clamp(1.4rem,4vw,2.1rem); */
  margin:0 0 clamp(26px,4vw,40px);
  color: #000;
}

/* Podium cards */
.lw-podium{align-items:center}

.lw-prize{
  height:100%;
  background:#fff;
  border:1px solid #e7edf4;
  border-radius:18px;
  padding:clamp(18px,2.4vw,24px);
  box-shadow:0 10px 30px rgba(11,37,69,.08);
}
.lw-prize__head{display:flex;align-items:flex-start;gap:14px}
.lw-prize__medal{flex:0 0 auto;width:58px;height:58px}
.lw-prize__rank{
  font-weight:700;
  font-size:clamp(1.1rem,2.6vw,1.3rem);
  line-height:1.2;
  margin:0 0 2px;
}
.lw-prize__kicker{font-size:.9rem;color:#5a6b80;margin:0}
.lw-prize__amount{
  display:block;
  font-weight:700;
  font-size:clamp(1.3rem,4vw,1.7rem);
  letter-spacing:-.02em;
  margin-top:2px;
}
.lw-prize__foot{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:clamp(16px,2.4vw,22px);
  padding-top:clamp(14px,2vw,18px);
  border-top:1px solid rgba(11,37,69,.1);
}
.lw-prize__foot dt{font-size:.82rem;font-weight:400;color:#5a6b80;margin-bottom:2px}
.lw-prize__foot dd{margin:0;font-weight:600;font-size:.98rem}

/* 1st */
.lw-prize--gold{
  background:linear-gradient(180deg,#fffdf6 0%,#fffaf0 100%);
  border:1.5px solid #e9c877;
  box-shadow:0 14px 34px rgba(192,138,4,.14);
}
.lw-prize--gold .lw-prize__rank,
.lw-prize--gold .lw-prize__amount{color:#c08a04}
.lw-prize--gold .lw-prize__foot{border-top-color:rgba(192,138,4,.24)}

/* 2nd */
.lw-prize--silver{background:#f5f8fa;border-color:#dfe5ec}
.lw-prize--silver .lw-prize__rank,
.lw-prize--silver .lw-prize__amount{color:#67788a}

/* 3rd */
.lw-prize--bronze{background:#fff7f3;border-color:#f0d3c4}
.lw-prize--bronze .lw-prize__rank,
.lw-prize--bronze .lw-prize__amount{color:#c0442b}

@media (min-width:992px){
  /* lift the winning card slightly, as in the design */
  .lw-prize--gold{margin-block:-16px;padding-block:calc(clamp(18px,2.4vw,24px) + 10px)}
}

/* Other winners panel */
.lw-panel{
  background:#fff;
  border:1px solid #e7edf4;
  border-radius:18px;
  box-shadow:0 10px 30px rgba(11,37,69,.08);
  padding:clamp(20px,3vw,32px);
  margin-top:clamp(22px,3.5vw,34px);
}
.lw-panel__title{
  font-weight:700;
  font-size:clamp(1.15rem,3vw,1.5rem);
  margin:0 0 clamp(16px,2.4vw,22px);
  color: #000;
}

.lw-table{width:100%;border-collapse:separate;border-spacing:0}
.lw-table thead th{
  background:#f2f6fa;
  color:#5a6b80;
  font-weight:500;
  /* font-size:.875rem; */
  font-size:1.0rem;
  padding:12px 16px;
  white-space:nowrap;
}
.lw-table thead th:first-child{border-radius:10px 0 0 10px}
.lw-table thead th:last-child{border-radius:0 10px 10px 0}
.lw-table tbody td{
  padding:14px 16px;
  border-bottom:1px solid #e7edf4;
  /*font-size:.95rem; */
  font-size:1.1rem;
  vertical-align:middle;
}
.lw-table tbody tr:last-child td{border-bottom:0}
.lw-table .lw-ticket{font-weight:600;letter-spacing:.01em}
.lw-rank{
  display:inline-grid;
  place-items:center;
  width:30px;height:30px;
  border-radius:50%;
  background:#eef4fb;
  color:#12284b;
  font-size:.85rem;
  font-weight:600;
}

.lw-panel__foot{display:flex;justify-content:center;margin-top:clamp(18px,3vw,28px)}
.lw-btn-outline{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:.7rem 1.7rem;
  border:1.5px solid #0b2545;
  border-radius:999px;
  color:#0b2545;
  font-weight:500;
  text-decoration:none;
  transition:background-color .2s ease,color .2s ease;
}
.lw-btn-outline:hover,
.lw-btn-outline:focus-visible{background:#0b2545;color:#fff}
.lw-btn-outline svg{flex:0 0 auto}

/* Focus visibility */
a:focus-visible{outline:2px solid #2f8ed6;outline-offset:3px;border-radius:6px}

/* ---------- MOBILE ------------------------------------------------------ */

@media (max-width:767.98px){
  /* table turns into stacked rows */
  .lw-table thead{
    position:absolute;
    width:1px;height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
  }
  .lw-table,
  .lw-table tbody,
  .lw-table tr,
  .lw-table td{display:block;width:100%}
  .lw-table tbody tr{
    border:1px solid #e7edf4;
    border-radius:14px;
    padding:14px 16px;
    margin-bottom:12px;
  }
  .lw-table tbody tr:last-child{margin-bottom:0}
  .lw-table tbody td{
    padding:0;
    border-bottom:0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin-bottom:8px;
  }
  .lw-table tbody td:last-child{margin-bottom:0}
  .lw-table tbody td::before{
    content:attr(data-label);
    color:#5a6b80;
    font-size:.82rem;
    flex:0 0 auto;
  }
  .lw-table tbody td.lw-cell-prize{
    justify-content:flex-start;
    margin-bottom:10px;
  }
  .lw-table tbody td.lw-cell-prize::before{content:none}
  .lw-table tbody td.lw-cell-value{
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    font-weight:600;
  }
  .lw-table tbody td.lw-cell-value::before{order:-1;font-weight:400}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

@media (max-width:767.98px){
  .lw-podium > *{margin-bottom:16px}
  .lw-podium > *:last-child{margin-bottom:0}
}

/* ==========================================================================
   WINNERS GALLERY
   ========================================================================== */

.lw-gallery{padding:clamp(30px,5vw,54px) 0 clamp(40px,6vw,72px)}

.lw-gallery__head{
  display:block;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:8px 20px;
  margin-bottom:clamp(18px,3vw,28px);
}
.lw-gallery__title{
  font-weight:700;
  font-size:clamp(1.15rem,3vw,1.5rem);
  margin:0;
}
.lw-gallery__note{
  margin:0;
  color:#5a6b80;
  font-size:.92rem;
  text-align:center;
}

/* --- grid ---------------------------------------------------------------- */

.lw-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:180px;
  gap:12px;
}
/* first frame is the anchor of the composition */
.lw-grid__item:first-child{grid-column:span 2;grid-row:span 2}

.lw-frame{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  border-radius:16px;
  overflow:hidden;
  background:#e7edf4;
  cursor:pointer;
  isolation:isolate;
}
.lw-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.lw-frame:hover img,
.lw-frame:focus-visible img{transform:scale(1.045)}
.lw-frame:focus-visible{outline:2px solid #2f8ed6;outline-offset:3px}

.lw-frame__cap{
  position:absolute;
  inset:auto 0 0 0;
  padding:34px 14px 12px;
  text-align:left;
  color:#fff;
  background:linear-gradient(180deg,rgba(6,24,58,0) 0%,rgba(6,24,58,.78) 70%);
}
.lw-frame__name{
  display:block;
  font-weight:600;
  font-size:.92rem;
  line-height:1.25;
}
.lw-frame__prize{
  display:block;
  font-size:.78rem;
  color:rgba(255,255,255,.82);
  margin-top:1px;
}
.lw-grid__item:first-child .lw-frame__name{font-size:1.1rem}
.lw-grid__item:first-child .lw-frame__prize{font-size:.85rem}

/* gold hairline on the top-prize frames */
.lw-frame--gold::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:16px;
  border:2px solid #e9c877;
  pointer-events:none;
}

/* --- lightbox ------------------------------------------------------------ */

.lw-lightbox{
  border:0;
  padding:0;
  max-width:min(1000px,92vw);
  max-height:92vh;
  background:transparent;
  overflow:visible;
}
.lw-lightbox::backdrop{background:rgba(6,24,58,.82)}

.lw-lightbox__figure{margin:0}
.lw-lightbox img{
  display:block;
  width:100%;
  max-height:76vh;
  object-fit:contain;
  border-radius:14px;
  background:#0b2545;
}
.lw-lightbox figcaption{
  color:#fff;
  padding:14px 4px 0;
  font-size:.95rem;
}
.lw-lightbox figcaption span{display:block;color:rgba(255,255,255,.75);font-size:.85rem}

.lw-lb-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:46px;height:46px;
  display:grid;place-items:center;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  color:#0b2545;
  cursor:pointer;
}
.lw-lb-btn:hover{background:#fff}
.lw-lb-prev{left:-58px}
.lw-lb-next{right:-58px}
.lw-lb-close{
  position:absolute;
  top:-52px;right:0;
  transform:none;
  width:40px;height:40px;
}
@media (max-width:900px){
  .lw-lb-prev{left:6px}
  .lw-lb-next{right:6px}
  .lw-lb-close{top:-48px}
}

/* --- mobile: swipeable strip -------------------------------------------- */

@media (max-width:767.98px){
  .lw-grid{
    display:flex;
    gap:12px;
    grid-auto-rows:auto;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-bottom:10px;
    margin-inline:calc(var(--bs-gutter-x,1.5rem) * -.5);
    padding-inline:calc(var(--bs-gutter-x,1.5rem) * .5);
    scrollbar-width:none;
  }
  .lw-grid::-webkit-scrollbar{display:none}
  .lw-grid__item{
    flex:0 0 78%;
    scroll-snap-align:center;
    height:230px;
  }
  .lw-grid__item:first-child{grid-column:auto;grid-row:auto}
  .lw-grid__item:first-child .lw-frame__name{font-size:.95rem}
}

@media (min-width:768px) and (max-width:991.98px){
  .lw-grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:160px}
}

@media (prefers-reduced-motion:reduce){
  .lw-frame img{transition:none}
  .lw-frame:hover img,
  .lw-frame:focus-visible img{transform:none}
}

/*with video in hero*/
.lw-hero{
  --lw-hero-h: clamp(380px, 40vw, 530px);
  --lw-hero-shift: 10px;

  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  min-height:475px;
  padding-block:clamp(40px,6vw,64px) clamp(52px,7vw,78px);
  color:#fff;
  background:#0a2352;              /* shows while the video loads */
  /* border-bottom-left-radius:50% 42px;
  border-bottom-right-radius:50% 42px; */
}

.lw-hero__media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center right;
  z-index:0;
  pointer-events:none;
}

.lw-hero__scrim{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(90deg,
    rgba(6,24,58,.72) 0%,
    rgba(6,24,58,.45) 45%,
    rgba(6,24,58,.15) 100%);
}

.lw-hero > .container{
  position:relative;
  z-index:2;
  width:100%;
  transform:translateY(var(--lw-hero-shift));
}

/* buttons sit side by side, wrap cleanly on small screens */
.lw-hero .lw-btn-ghost{margin:0 10px 10px 0}

@media (max-width:767.98px){
  .lw-hero{
    --lw-hero-h: clamp(340px, 78vw, 430px);
    --lw-hero-shift: 6px;
	  min-height:300px;
  }
  .lw-hero__media{object-position:center}
  .lw-hero__scrim{background:rgba(6,24,58,.55)}   /* even wash under centred-ish text */

}

/* honour reduced-motion: freeze on the poster frame */
@media (prefers-reduced-motion:reduce){
  .lw-hero__media{display:none}
  .lw-hero{
    background:#0a2352 url('/assets/img/myt-money-lottery-hero-clean-1920x530.png') center right / cover no-repeat;
  }
}