body {
    counter-reset: item 0; /* "item" is the counter name, starts at 1 */
}
#hero {
    position: relative;
    background-color: var(--bs-heroblue);
    background: url(../img/honma-huawei-watch-gt-6-pro-protection.jpg) no-repeat center center / cover;
    aspect-ratio: 3/4;
    object-fit: cover;
    width: 100%;
}
.hero-banner {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.55);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.hero-logo {
    width: 80dvw;
    height: auto;
    filter: invert(1);
}
.hero-subtitle {
    color: var(--bs-yellow);
    font-size: 4vw;
    margin-top: 2rem;
    margin-bottom: 0;
}
.hero-title {
    color: var(--bs-white);
    font-size: 8vw;
    margin-bottom: 0;
    text-align: center;
}

html[lang="en"] .hero-subtitle {
    font-size: 3vw;
}

html[lang="en"] .hero-title {
    font-size: 5vw;
}
@media (min-width:1024px) {
    #hero {
        aspect-ratio: 16/9;
    }
}
@media (orientation: landscape) {
    #hero {
        aspect-ratio: 16/9;
    }
}
.prize-item {
    margin-bottom: 2rem;
    background: var(--bs-gray-700);
    height: 100%;
}
.prize-item-content {
    padding: 1rem;
}
.prize-badge {
    position: relative;
    width: 100%;
}
.prize-name {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}
@media (min-width:768px) and (max-width:998px) {
    .prize-name {
        font-size: 0.85rem;
    }
}
.prize-badge-text {
position: absolute;
    top: 10px;
    left: 10px;
    color: var(--bs-white);
    background: var(--bs-yellow);
    color: var(--bs-dark);
    font-size: 1rem;
    padding: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}
.prize-badge-text img {
    height: 1.2rem;
    width: auto;
    margin-right: 0.5rem;
    vertical-align: middle;
}
.prize-badge-1 .prize-badge-text {
    background: #f2de44;
    background: linear-gradient(180deg, rgba(242, 222, 68, 1) 40%, rgba(245, 150, 61, 1) 100%);
}
.prize-badge-2 .prize-badge-text {
    background: #e0e0dc;
    background: linear-gradient(180deg, rgba(224, 224, 220, 1) 40%, rgba(148, 148, 148, 1) 100%);
}
.prize-badge-3 .prize-badge-text {
    background: #c7980c;
    background: linear-gradient(180deg, rgba(199, 152, 12, 1) 40%, rgba(189, 113, 26, 1) 100%);
}
.prize-details {
    font-size: 0.8rem;
}
.prize-value {
    font-size: 1rem;
    margin-top: 1.5rem;
    margin-bottom: 0;
    color: var(--bs-gray-200);
}
.prize-quota {
    margin-bottom: 0;
    color: var(--bs-yellow);
}
.prize-img {
    max-width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
}

/* For each ordered list inside the body, reset a sub-counter */
ol.tnc-list {
    counter-reset: sub-item;
    list-style: none;
    margin-left: 3rem;
}

/* Style the content before each list item (li) */
ol.tnc-list li::before {
    /* Get the main counter value, a dot, the sub-counter value, and a space */
    content: counter(item) "." counter(sub-item) " ";
    /* Increment the sub-counter for each list item */
    counter-increment: sub-item;
    margin-left: -2.2rem;
}

/* Increment the main counter after each 'custom-list' is finished */
ol.tnc-list {
    counter-increment: item;
}

ul.bullet-list {
    list-style: disc;
}
ul.bullet-list li {
    margin-bottom: 0;
}
ul.bullet-list li::before {
    content: "";
    counter-increment: none;
    margin-left:0rem;
}

table.campaign-period {
    border: 0;
}

table.campaign-period td {
    vertical-align: top;
}
table.campaign-period td:first-child {
    width: 80px;
}

html[lang="en"] table.campaign-period td:first-child {
    width: 180px;
}