.vmi-moon__table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.vmi-moon__table {
width: 100%;
border-collapse: collapse;
}
.vmi-moon__table th,
.vmi-moon__table td {
padding: 0.75rem;
border: 1px solid #d9d9d9;
text-align: left;
vertical-align: top;
}
.vmi-moon__table thead th {
font-weight: 700;
}
.vmi-moon__phase a {
text-decoration: underline;
text-underline-offset: 0.12em;
}
.vmi-moon__note {
margin-top: 0.75rem;
}
@media (max-width: 640px) {
.vmi-moon__table th,
.vmi-moon__table td {
padding: 0.6rem;
white-space: nowrap;
}
}
.vmi-moon__weekday,
.vmi-moon__date,
.vmi-moon__time {
white-space: nowrap;
}
.vmi-moon__facts {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.75rem;
margin: 0;
}
.vmi-moon__fact {
padding: 1rem;
border: 1px solid #d9d9d9;
}
.vmi-moon__fact dt {
margin: 0 0 0.35rem;
font-weight: 700;
}
.vmi-moon__fact dd {
margin: 0;
}
@media (max-width: 700px) {
.vmi-moon__facts {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 420px) {
.vmi-moon__facts {
grid-template-columns: 1fr;
}
} .vmi-moon-hero {
padding: clamp(1.5rem, 3vw, 2.5rem);
border: 2px solid #e6aa35;
border-radius: 22px;
background: #142044;
color: #f7f8ff;
}
.vmi-moon-hero__eyebrow {
margin-bottom: 0.7rem;
font-size: 0.92rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #f3b43f;
}
.vmi-moon-hero__headline {
margin: 0;
color: inherit;
font-size: clamp(1.65rem, 4vw, 2.75rem);
line-height: 1.15;
}
.vmi-moon-hero__after {
margin: 1.2rem 0 0;
font-size: clamp(1rem, 2vw, 1.2rem);
color: #d7def4;
}
.vmi-moon-hero__countdown {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.8rem;
margin-top: 1.5rem;
}
.vmi-moon-hero__count {
padding: 1rem 0.75rem;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 12px;
text-align: center;
}
.vmi-moon-hero__count strong {
display: block;
font-size: clamp(1.7rem, 4vw, 2.7rem);
line-height: 1;
}
.vmi-moon-hero__count span {
display: block;
margin-top: 0.45rem;
font-size: 0.82rem;
color: #c7cfe8;
}
.vmi-moon-hero__timezone {
margin: 1rem 0 0;
font-size: 0.8rem;
color: #aeb9d9;
}
@media (max-width: 640px) {
.vmi-moon-hero {
border-radius: 18px;
}
.vmi-moon-hero__countdown {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
} .vmi-moon-today {
padding: clamp(1.25rem, 3vw, 2rem);
border: 1px solid #d9d9d9;
border-radius: 18px;
background: #ffffff;
}
.vmi-moon-today__eyebrow {
margin-bottom: 0.35rem;
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.vmi-moon-today__title {
margin: 0;
font-size: clamp(1.6rem, 3vw, 2.2rem);
}
.vmi-moon-today__date {
margin: 0.4rem 0 0;
}
.vmi-moon-today__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.75rem;
margin-top: 1.25rem;
}
.vmi-moon-today__item {
padding: 1rem;
border: 1px solid #dedede;
border-radius: 12px;
}
.vmi-moon-today__item span,
.vmi-moon-today__item strong {
display: block;
}
.vmi-moon-today__item span {
margin-bottom: 0.3rem;
font-size: 0.82rem;
}
.vmi-moon-today__item strong {
font-size: 1.1rem;
}
.vmi-moon-today__next {
margin: 1rem 0 0;
}
.vmi-moon-today__timezone {
margin: 0.7rem 0 0;
font-size: 0.8rem;
}
@media (max-width: 700px) {
.vmi-moon-today__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 420px) {
.vmi-moon-today__grid {
grid-template-columns: 1fr;
}
} .vmi-moon-countdown {
padding: clamp(1.25rem, 3vw, 2rem);
border: 1px solid #d9d9d9;
border-radius: 18px;
background: #ffffff;
}
.vmi-moon-countdown__eyebrow {
margin-bottom: 0.35rem;
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.vmi-moon-countdown__title {
margin: 0;
font-size: clamp(1.5rem, 3vw, 2.1rem);
}
.vmi-moon-countdown__date {
margin: 0.45rem 0 0;
}
.vmi-moon-countdown__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.75rem;
margin-top: 1.25rem;
}
.vmi-moon-countdown__item {
padding: 1rem;
border: 1px solid #dedede;
border-radius: 12px;
text-align: center;
}
.vmi-moon-countdown__item strong {
display: block;
font-size: clamp(1.8rem, 4vw, 2.6rem);
line-height: 1;
}
.vmi-moon-countdown__item span {
display: block;
margin-top: 0.4rem;
font-size: 0.82rem;
}
.vmi-moon-countdown__timezone {
margin: 0.8rem 0 0;
font-size: 0.8rem;
}
@media (max-width: 640px) {
.vmi-moon-countdown__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
} .vmi-moon-world {
margin: 24px 0 42px;
}
.vmi-moon-world__intro {
margin-bottom: 20px;
}
.vmi-moon-world__eyebrow {
margin-bottom: 6px;
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.09em;
text-transform: uppercase;
color: #6b7280;
}
.vmi-moon-world__title {
margin: 0 0 10px;
}
.vmi-moon-world__intro p {
margin: 0;
max-width: 850px;
line-height: 1.7;
}
.vmi-moon-world__table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.vmi-moon-world__country {
display: block;
margin-top: 3px;
font-size: 0.78rem;
font-weight: 400;
color: #6b7280;
}
.vmi-moon-world__table code {
font-size: 0.78rem;
white-space: nowrap;
}
.vmi-moon-world__note {
margin: 10px 0 0;
color: #6b7280;
}
@media (max-width: 700px) {
.vmi-moon-world__table th,
.vmi-moon-world__table td {
white-space: nowrap;
}
}