.imx7ug-table {
--imx7ug-table-width: 100%;
--imx7ug-outer-border-width: 1px;
--imx7ug-outer-border-color: #e0e0e0;
--imx7ug-outer-radius: 8px;
--imx7ug-row-border-width: 1px;
--imx7ug-row-border-color: #e0e0e0;
--imx7ug-row-margin-bottom: 0px;
--imx7ug-stripe-bg: #f9f9f9;
--imx7ug-hover-bg: #f5f5f5;
--imx7ug-header-bg: #222222;
--imx7ug-header-text-color: #ffffff;
--imx7ug-header-font-size: 14px;
--imx7ug-header-font-weight: 600;
--imx7ug-header-border-width: 0px;
--imx7ug-header-border-color: #e0e0e0;
--imx7ug-header-align: left;
--imx7ug-cell-padding: 12px 20px;
--imx7ug-column-gap: 0px;
--imx7ug-logo-max-width: 120px;
--imx7ug-logo-max-height: 60px;
--imx7ug-logo-border-width: 0px;
--imx7ug-logo-border-color: #e0e0e0;
--imx7ug-logo-border-radius: 0px;
--imx7ug-featured-image-max-width: 120px;
--imx7ug-featured-image-max-height: 60px;
--imx7ug-featured-image-border-width: 0px;
--imx7ug-featured-image-border-color: #e0e0e0;
--imx7ug-featured-image-border-radius: 0px;
--imx7ug-bonus-font-size: 16px;
--imx7ug-bonus-font-weight: 600;
--imx7ug-bonus-color: #222222;
--imx7ug-rating-font-size: 16px;
--imx7ug-rating-color: #222222;
--imx7ug-rating-font-weight: 600;
--imx7ug-rating-star-size: 18px;
--imx7ug-rating-star-color: #f39c12;
--imx7ug-rating-single-star-color: var(--imx7ug-rating-star-color);
--imx7ug-rating-badge-bg: transparent;
--imx7ug-rating-badge-radius: 0px;
--imx7ug-rating-title-font-size: 14px;
--imx7ug-rating-title-bg: transparent;
--imx7ug-rating-title-radius: 0px;
--imx7ug-rating-suffix-font-size: 12px;
--imx7ug-cta-width: auto;
--imx7ug-cta-font-size: 14px;
--imx7ug-cta-font-weight: 700;
--imx7ug-cta-bg-color: #00b894;
--imx7ug-cta-text-color: #ffffff;
--imx7ug-cta-border-width: 0px;
--imx7ug-cta-border-color: #00b894;
--imx7ug-cta-radius: 6px;
--imx7ug-cta-hover-bg: #00a884;
--imx7ug-cta-padding: 10px 20px;
--imx7ug-review-cta-width: auto;
--imx7ug-review-cta-font-size: 14px;
--imx7ug-review-cta-font-weight: 700;
--imx7ug-review-cta-bg-color: #00b894;
--imx7ug-review-cta-text-color: #ffffff;
--imx7ug-review-cta-border-width: 0px;
--imx7ug-review-cta-border-color: #00b894;
--imx7ug-review-cta-radius: 6px;
--imx7ug-review-cta-hover-bg: #00a884;
--imx7ug-review-cta-padding: 10px 20px;
--imx7ug-grid-columns: 1fr;
--imx7ug-column-count: 1;
--imx7ug-margin-top: 20px;
--imx7ug-margin-bottom: 20px;
--imx7ug-margin-left: auto;
--imx7ug-margin-right: auto;
--imx7ug-padding-top: 0px;
--imx7ug-padding-bottom: 0px;
--imx7ug-padding-left: 0px;
--imx7ug-padding-right: 0px;
--imx7ug-row-num-font-size: 14px;
--imx7ug-row-num-font-weight: 700;
--imx7ug-row-num-color: #ffffff;
--imx7ug-row-num-bg: #222222;
--imx7ug-row-num-cell-bg: inherit;
--imx7ug-row-num-cell-border-color: #e0e0e0;
--imx7ug-row-num-border-width: 0px;
--imx7ug-row-num-border-color: #e0e0e0;
--imx7ug-row-num-border-radius: 50%;
--imx7ug-row-num-padding: 5px;
--imx7ug-row-num-padding-even: 5px;
display: grid;
grid-template-columns: var(--imx7ug-grid-columns);
gap: var(--imx7ug-column-gap);
width: var(--imx7ug-table-width);
max-width: 100%;
margin-top: var(--imx7ug-margin-top);
margin-bottom: var(--imx7ug-margin-bottom);
margin-left: var(--imx7ug-margin-left);
margin-right: var(--imx7ug-margin-right);
padding-top: var(--imx7ug-padding-top);
padding-bottom: var(--imx7ug-padding-bottom);
padding-left: var(--imx7ug-padding-left);
padding-right: var(--imx7ug-padding-right);
border-style: solid;
border-width: var(--imx7ug-outer-border-width, 0);
border-color: var(--imx7ug-outer-border-color);
border-radius: var(--imx7ug-outer-radius);
background: var(--imx7ug-table-bg, transparent);
overflow: hidden;
font-family: inherit;
}
.imx7ug-head,
.imx7ug-body {
display: contents;
}
.imx7ug-table[data-header="off"] .imx7ug-head {
display: none !important;
}
.imx7ug-row {
display: contents;
}
.imx7ug-body .imx7ug-row {
display: grid;
grid-template-columns: subgrid;
grid-column: 1 / -1;
border-style: solid;
border-width: var(--imx7ug-row-border-widths, 0 0 var(--imx7ug-row-border-width, 1px) 0);
border-color: var(--imx7ug-row-border-color);
margin-bottom: var(--imx7ug-row-margin-bottom);
background: var(--imx7ug-row-bg, #ffffff);
border-radius: var(--imx7ug-row-radius, 0);
overflow: hidden;
}
.imx7ug-body .imx7ug-row:last-child {
margin-bottom: 0;
}
.imx7ug-table:not([data-row-box]) .imx7ug-body .imx7ug-row:last-child {
border-bottom-width: 0;
}
.imx7ug-header-cell {
background: var(--imx7ug-header-bg);
color: var(--imx7ug-header-text-color);
font-weight: var(--imx7ug-header-font-weight);
font-size: var(--imx7ug-header-font-size);
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: var(--imx7ug-header-border-width) solid var(--imx7ug-header-border-color);
}
.imx7ug-body .imx7ug-cell {
background: var(--imx7ug-row-bg, #ffffff);
}
.imx7ug-table[data-striped="true"] .imx7ug-body .imx7ug-row-even .imx7ug-cell {
background: var(--imx7ug-stripe-bg);
}
.imx7ug-table[data-hover="true"] .imx7ug-body .imx7ug-row:hover .imx7ug-cell {
background: var(--imx7ug-hover-bg);
}
.imx7ug-table[data-striped="true"] .imx7ug-body .imx7ug-row-even {
background: var(--imx7ug-stripe-bg);
}
.imx7ug-table[data-hover="true"] .imx7ug-body .imx7ug-row:hover {
background: var(--imx7ug-hover-bg);
}
.imx7ug-table[data-featured-first="true"] .imx7ug-body .imx7ug-row-featured {
background: var(--imx7ug-featured-bg);
}
.imx7ug-table[data-featured-first="true"] .imx7ug-body .imx7ug-row-featured .imx7ug-cell {
background: var(--imx7ug-featured-bg);
}
.imx7ug-table[data-row-num-column-bg="true"] .imx7ug-body .imx7ug-num-cell {
background: var(--imx7ug-row-num-cell-bg);
border-bottom-color: var(--imx7ug-row-num-cell-border-color);
}
.imx7ug-grid-wrapper[data-featured-first="true"] .imx7ug-row-featured {
background: var(--imx7ug-featured-bg);
}
.imx7ug-cell {
padding: var(--imx7ug-cell-padding);
display: flex;
align-items: center;
min-width: 0;
word-wrap: break-word;
overflow-wrap: break-word;
}
.imx7ug-cell .imx7ug-cell-stack,
.imx7ug-cell .imx7ug-cell-item {
width: 100%;
}
.imx7ug-cell[style*="text-align: center"] {
justify-content: center;
}
.imx7ug-row-number {
box-sizing: content-box;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2ch;
height: auto;
font-variant-numeric: tabular-nums;
padding: var(--imx7ug-row-num-padding);
font-size: var(--imx7ug-row-num-font-size);
font-weight: var(--imx7ug-row-num-font-weight);
color: var(--imx7ug-row-num-color);
background: var(--imx7ug-row-num-bg);
border-style: solid;
border-width: var(--imx7ug-row-num-border-width, 0);
border-color: var(--imx7ug-row-num-border-color);
border-radius: var(--imx7ug-row-num-border-radius);
line-height: 1;
}
.imx7ug-cell[style*="text-align: right"] {
justify-content: flex-end;
}
.imx7ug-logo {
display: inline-flex;
align-items: center;
justify-content: center;
}
.imx7ug-featured-image {
display: inline-flex;
align-items: center;
justify-content: center;
}
.imx7ug-logo-img,
.imx7ug-logo img {
display: block;
max-width: var(--imx7ug-logo-max-width);
max-height: var(--imx7ug-logo-max-height);
width: auto;
height: auto;
object-fit: contain;
border-style: solid;
border-width: var(--imx7ug-logo-border-width, 0);
border-color: var(--imx7ug-logo-border-color);
border-radius: var(--imx7ug-logo-border-radius);
}
.imx7ug-bonus {
font-size: var(--imx7ug-bonus-font-size);
color: var(--imx7ug-bonus-color);
font-weight: var(--imx7ug-bonus-font-weight);
word-wrap: break-word;
overflow-wrap: break-word;
}
.imx7ug-cta {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: var(--imx7ug-cta-width);
min-width: 120px;
padding: var(--imx7ug-cta-padding);
font-size: var(--imx7ug-cta-font-size);
font-weight: var(--imx7ug-cta-font-weight);
text-transform: uppercase;
letter-spacing: 0.5px;
background: var(--imx7ug-cta-bg-color);
color: var(--imx7ug-cta-text-color) !important;
border-style: solid;
border-width: var(--imx7ug-cta-border-width, 0);
border-color: var(--imx7ug-cta-border-color);
border-radius: var(--imx7ug-cta-radius);
text-decoration: var(--imx7ug-cta-decoration, none) !important;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease;
}
.imx7ug-cta:hover {
background: var(--imx7ug-cta-hover-bg);
color: var(--imx7ug-cta-hover-text-color, var(--imx7ug-cta-text-color)) !important;
text-decoration: var(--imx7ug-cta-hover-decoration, none) !important;
}
.imx7ug-cta:visited {
color: var(--imx7ug-cta-text-color) !important;
}
.imx7ug-cta:active {
transform: scale(0.98);
}
.imx7ug-cell-stack {
display: flex;
flex-direction: column;
gap: 6px;
align-items: stretch;
}
.imx7ug-cell-item {
display: block;
}
.imx7ug-review-cta {
width: var(--imx7ug-review-cta-width, var(--imx7ug-cta-width));
min-width: 120px;
padding: var(--imx7ug-review-cta-padding, var(--imx7ug-cta-padding));
font-size: var(--imx7ug-review-cta-font-size, var(--imx7ug-cta-font-size));
font-weight: var(--imx7ug-review-cta-font-weight, var(--imx7ug-cta-font-weight));
background: var(--imx7ug-review-cta-bg-color, var(--imx7ug-cta-bg-color));
color: var(--imx7ug-review-cta-text-color, var(--imx7ug-cta-text-color)) !important;
border-style: solid;
border-width: var(--imx7ug-review-cta-border-width, var(--imx7ug-cta-border-width));
border-color: var(--imx7ug-review-cta-border-color, var(--imx7ug-cta-border-color));
border-radius: var(--imx7ug-review-cta-radius, var(--imx7ug-cta-radius));
text-decoration: var(--imx7ug-review-cta-decoration, none) !important;
}
.imx7ug-review-cta:hover {
background: var(--imx7ug-review-cta-hover-bg, var(--imx7ug-cta-hover-bg));
color: var(--imx7ug-review-cta-hover-text-color, var(--imx7ug-review-cta-text-color, var(--imx7ug-cta-text-color))) !important;
text-decoration: var(--imx7ug-review-cta-hover-decoration, none) !important;
}
.imx7ug-review-cta:visited {
color: var(--imx7ug-review-cta-text-color, var(--imx7ug-cta-text-color)) !important;
}
.imx7ug-yes {
color: var(--imx7ug-icon-yes-color, #00b894);
font-size: var(--imx7ug-icon-yes-size, 1.25em);
font-weight: bold;
}
.imx7ug-no {
color: var(--imx7ug-icon-no-color, #d63031);
font-size: var(--imx7ug-icon-no-size, 1.25em);
font-weight: bold;
}
.imx7ug-table[data-icon-bg="true"] .imx7ug-yes,
.imx7ug-grid-wrapper[data-icon-bg="true"] .imx7ug-yes {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--imx7ug-icon-yes-padding);
background: var(--imx7ug-icon-yes-bg);
border-style: solid;
border-width: var(--imx7ug-icon-yes-border-width, 0);
border-color: var(--imx7ug-icon-yes-border-color);
border-radius: var(--imx7ug-icon-yes-border-radius);
line-height: 1;
box-sizing: border-box;
}
.imx7ug-table[data-icon-bg="true"] .imx7ug-no,
.imx7ug-grid-wrapper[data-icon-bg="true"] .imx7ug-no {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--imx7ug-icon-no-padding);
background: var(--imx7ug-icon-no-bg);
border-style: solid;
border-width: var(--imx7ug-icon-no-border-width, 0);
border-color: var(--imx7ug-icon-no-border-color);
border-radius: var(--imx7ug-icon-no-border-radius);
line-height: 1;
box-sizing: border-box;
}
.imx7ug-site-name {
font-size: var(--imx7ug-site-name-font-size, inherit);
font-weight: var(--imx7ug-site-name-font-weight, inherit);
color: var(--imx7ug-site-name-color, inherit);
}
.imx7ug-title {
font-weight: var(--imx7ug-site-name-font-weight, 600);
}
.imx7ug-terms {
font-size: 13px;
color: #636e72;
}
.imx7ug-rating {
font-size: var(--imx7ug-rating-font-size);
font-weight: var(--imx7ug-rating-font-weight);
color: var(--imx7ug-rating-color);
}
.imx7ug-rating-title {
font-size: var(--imx7ug-rating-title-font-size);
font-weight: 600;
white-space: nowrap;
}
.imx7ug-rating-suffix {
font-size: var(--imx7ug-rating-suffix-font-size);
}
.imx7ug-rating-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--imx7ug-rating-badge-bg);
border-radius: var(--imx7ug-rating-badge-radius);
padding: 2px 8px;
white-space: nowrap;
}
.imx7ug-rating-badge.imx7ug-rating-badge-title {
background: var(--imx7ug-rating-title-bg);
border-radius: var(--imx7ug-rating-title-radius);
}
.imx7ug-rating-single-star {
color: var(--imx7ug-rating-single-star-color);
font-size: var(--imx7ug-rating-star-size);
line-height: 1;
}
.imx7ug-rating-stars {
display: inline-flex;
gap: 2px;
}
.imx7ug-rating-star {
font-size: var(--imx7ug-rating-star-size);
line-height: 1;
}
.imx7ug-star-full {
color: var(--imx7ug-rating-star-color);
}
.imx7ug-star-empty {
color: var(--imx7ug-rating-star-color);
opacity: 0.3;
}
.imx7ug-star-partial {
position: relative;
display: inline-block;
}
.imx7ug-star-partial .imx7ug-star-bg {
color: var(--imx7ug-rating-star-color);
opacity: 0.3;
}
.imx7ug-star-partial .imx7ug-star-fg {
position: absolute;
left: 0;
top: 0;
color: var(--imx7ug-rating-star-color);
overflow: hidden;
width: var(--star-fill, 50%);
}
img.imx7ug-featured-image,
.imx7ug-featured-image-img {
max-width: var(--imx7ug-featured-image-max-width);
max-height: var(--imx7ug-featured-image-max-height);
width: auto;
object-fit: contain;
border-style: solid;
border-width: var(--imx7ug-featured-image-border-width, 0);
border-color: var(--imx7ug-featured-image-border-color);
border-radius: var(--imx7ug-featured-image-border-radius);
height: auto;
display: block;
}
.imx7ug-error,
.imx7ug-no-results {
padding: 20px;
text-align: center;
color: #636e72;
background: #f8f9fa;
border-radius: 8px;
}
@media (max-width: 1000px) {
.imx7ug-table.imx7ug-hide-header-mobile .imx7ug-head {
display: none !important;
}
.imx7ug-mobile-cards {
display: block !important;
}
.imx7ug-mobile-cards .imx7ug-head {
display: none !important;
}
.imx7ug-mobile-cards .imx7ug-body {
display: block !important;
}
.imx7ug-mobile-cards .imx7ug-row {
display: flex !important;
flex-direction: column;
padding: 16px;
margin-bottom: 12px;
border-radius: var(--imx7ug-outer-radius);
border: var(--imx7ug-row-border-width) solid var(--imx7ug-row-border-color);
background: var(--imx7ug-row-bg, #ffffff);
}
.imx7ug-mobile-cards .imx7ug-body .imx7ug-row {
border-bottom: var(--imx7ug-row-border-width) solid var(--imx7ug-row-border-color);
}
.imx7ug-table.imx7ug-mobile-cards .imx7ug-body .imx7ug-row:last-child {
border-bottom-width: var(--imx7ug-row-border-width) !important;
margin-bottom: 12px;
}
.imx7ug-table.imx7ug-mobile-cards[data-featured-first="true"] .imx7ug-row-featured {
background: var(--imx7ug-featured-bg);
}
.imx7ug-table.imx7ug-mobile-cards[data-featured-first="true"] .imx7ug-body .imx7ug-row-featured .imx7ug-cell {
background: transparent;
}
.imx7ug-mobile-cards .imx7ug-cell {
width: 100%;
padding: 8px 0;
justify-content: center !important;
text-align: center !important;
border-bottom: none !important;
}
.imx7ug-mobile-cards .imx7ug-cell::before {
content: attr(data-label);
display: block;
width: 100%;
font-weight: 600;
font-size: 12px;
color: #636e72;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 4px;
}
.imx7ug-mobile-cards .imx7ug-cell[data-label=""]::before {
display: none;
}
.imx7ug-mobile-cards.imx7ug-hide-header-mobile .imx7ug-cell::before {
display: none !important;
}
.imx7ug-mobile-cards .imx7ug-logo {
margin: 0 auto 8px;
}
.imx7ug-mobile-cards .imx7ug-cta {
width: 100%;
margin-top: 8px;
}
}
@media (max-width: 480px) {
.imx7ug-mobile-cards .imx7ug-row {
padding: 12px;
}
.imx7ug-bonus {
font-size: 14px;
}
.imx7ug-cta {
padding: 12px 16px;
font-size: 13px;
}
}
.imx7ug-grid-wrapper {
display: grid;
gap: 20px;
width: 100%;
margin-top: var(--imx7ug-margin-top);
margin-bottom: var(--imx7ug-margin-bottom);
border: none;
outline: none;
box-shadow: none;
}
.imx7ug-grid-wrapper.imx7ug-grid-cols-2 {
grid-template-columns: repeat(2, 1fr);
}
.imx7ug-grid-wrapper.imx7ug-grid-cols-3 {
grid-template-columns: repeat(3, 1fr);
}
.imx7ug-grid-wrapper.imx7ug-grid-cols-4 {
grid-template-columns: repeat(4, 1fr);
}
.imx7ug-grid-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 20px 16px;
background: var(--imx7ug-table-bg, #ffffff);
border-radius: var(--imx7ug-outer-radius);
border-style: solid;
border-width: var(--imx7ug-outer-border-width, 0);
border-color: var(--imx7ug-outer-border-color);
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.imx7ug-grid-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
.imx7ug-grid-cell {
width: 100%;
padding: 8px 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.imx7ug-grid-cell .imx7ug-cell-stack {
width: 100%;
}
.imx7ug-grid-cell .imx7ug-cell-item {
width: 100%;
}
.imx7ug-grid-cell[data-label]::before {
content: attr(data-label);
display: block;
width: 100%;
font-weight: 600;
font-size: 12px;
color: #636e72;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 4px;
}
.imx7ug-grid-cell[data-label=""]::before {
display: none;
}
.imx7ug-grid-card .imx7ug-logo {
margin: 0 auto 8px;
}
.imx7ug-grid-card .imx7ug-cta {
width: 100%;
margin-top: 0;
}
.imx7ug-featured-site-box {
width: 100%;
box-sizing: border-box;
}
.imx7ug-featured-site-box-columns {
display: grid;
width: 100%;
}
@media (max-width: 768px) {
.imx7ug-featured-site-box-columns {
grid-template-columns: 1fr !important;
}
.imx7ug-featured-site-box-columns.has-dividers > .imx7ug-featured-site-box-column::before {
display: none;
}
}
.imx7ug-featured-site-box-column {
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.imx7ug-featured-site-box-columns.is-middle > .imx7ug-featured-site-box-column {
justify-content: center;
}
.imx7ug-featured-site-box-columns.is-bottom > .imx7ug-featured-site-box-column {
justify-content: flex-end;
}
.imx7ug-featured-site-box-columns.has-dividers > .imx7ug-featured-site-box-column {
position: relative;
}
.imx7ug-featured-site-box-columns.has-dividers > .imx7ug-featured-site-box-column + .imx7ug-featured-site-box-column::before {
content: "";
position: absolute;
left: calc(var(--imx7ug-fsb-gap, 20px) / -2 - var(--imx7ug-fsb-divider-width, 1px) / 2);
top: calc((100% - var(--imx7ug-fsb-divider-height, 100%)) / 2);
height: var(--imx7ug-fsb-divider-height, 100%);
border-left: var(--imx7ug-fsb-divider-width, 1px) solid var(--imx7ug-fsb-divider-color, #e0e0e0);
pointer-events: none;
}
.imx7ug-featured-site-box-elements {
display: flex;
flex-direction: column;
gap: 10px;
}
.imx7ug-featured-site-box-element {
width: 100%;
}
.imx7ug-featured-site-box-elements.is-wrapping {
display: block;
}
.imx7ug-featured-site-box-elements.is-wrapping > .imx7ug-featured-site-box-element + .imx7ug-featured-site-box-element {
margin-top: 10px;
}
.imx7ug-featured-site-box-elements.is-wrapping::after {
content: "";
display: block;
clear: both;
}
.imx7ug-featured-site-box-element.is-sized .imx7ug-logo,
.imx7ug-featured-site-box-element.is-sized .imx7ug-featured-image,
.imx7ug-featured-site-box-element.is-sized .imx7ug-featured-site-box-image,
.imx7ug-featured-site-box-element.is-sized .imx7ug-featured-site-box-align {
display: block;
width: 100%;
}
.imx7ug-featured-site-box-element.is-sized img {
width: 100%;
max-width: 100%;
height: auto;
}
.imx7ug-featured-site-box-heading {
font-weight: 700;
margin: 0;
}
.imx7ug-featured-site-box-pill {
display: inline-block;
padding: 4px 12px;
border-radius: 999px;
}
.imx7ug-featured-site-box-label {
display: flex;
gap: 6px;
align-items: center;
}
.imx7ug-featured-site-box-label-above {
flex-direction: column;
align-items: flex-start;
}
.imx7ug-featured-site-box-label-left {
flex-direction: row;
align-items: center;
}
.imx7ug-featured-site-box-label-text {
font-weight: 600;
}
.imx7ug-featured-site-box-value {
display: inline-flex;
align-items: center;
}
.imx7ug-featured-site-box-richtext p {
margin: 0 0 8px;
}
.imx7ug-featured-site-box-richtext p:last-child {
margin-bottom: 0;
}
.imx7ug-featured-site-box-bullets {
margin: 0;
padding-left: 18px;
}
.imx7ug-featured-site-box-bullets li {
margin-bottom: 6px;
}
.imx7ug-featured-site-box-bullets li:last-child {
margin-bottom: 0;
}
.imx7ug-featured-site-box-bullets.is-check {
list-style: none;
padding-left: 0;
}
.imx7ug-featured-site-box-bullets.is-check li {
display: flex;
align-items: baseline;
gap: var(--imx7ug-featured-site-box-bullet-gap, 0px);
}
.imx7ug-featured-site-box-bullets.is-check .imx7ug-featured-site-box-bullet-line {
display: block;
flex-shrink: 0;
width: var(--imx7ug-featured-site-box-bullet-mark-width, 22px);
}
.imx7ug-featured-site-box-bullets.is-check .imx7ug-featured-site-box-bullet-line::before {
content: "\200b";
}
.imx7ug-featured-site-box-bullets.is-check .imx7ug-featured-site-box-bullet-mark {
display: inline-block;
vertical-align: middle;
line-height: 1;
color: var(--imx7ug-featured-site-box-check-color, #00b894);
font-weight: 700;
}
.imx7ug-featured-site-box-bullets.is-check .imx7ug-featured-site-box-bullet-mark.is-check-mark {
position: relative;
top: -0.025em;
}
.imx7ug-featured-site-box-bullets.is-check .imx7ug-featured-site-box-bullet-text {
min-width: 0;
}
.imx7ug-featured-site-box-align {
width: 100%;
}
.imx7ug-featured-site-box .imx7ug-cta,
.imx7ug-featured-site-box .imx7ug-review-cta {
display: flex;
margin-left: auto;
margin-right: auto;
}
.imx7ug-grid-rank {
width: 100%;
display: flex;
justify-content: center;
margin-bottom: 8px;
}
.imx7ug-grid-rank .imx7ug-row-number {
box-sizing: content-box;
display: flex;
align-items: center;
justify-content: center;
min-width: 2ch;
height: auto;
line-height: 1;
font-variant-numeric: tabular-nums;
font-size: var(--imx7ug-row-num-font-size);
font-weight: var(--imx7ug-row-num-font-weight);
color: var(--imx7ug-row-num-color);
background: var(--imx7ug-row-num-bg);
border-style: solid;
border-width: var(--imx7ug-row-num-border-width, 0);
border-color: var(--imx7ug-row-num-border-color);
border-radius: var(--imx7ug-row-num-border-radius);
padding: var(--imx7ug-row-num-padding);
}
[data-row-num-shape="circle"] .imx7ug-row-number,
[data-row-num-shape="square"] .imx7ug-row-number {
aspect-ratio: 1 / 1;
padding: var(--imx7ug-row-num-padding-even);
}
[data-row-num-shape="circle"] .imx7ug-row-number {
border-radius: 50%;
}
@media (max-width: 900px) {
.imx7ug-grid-wrapper.imx7ug-grid-cols-4 {
grid-template-columns: repeat(2, 1fr);
}
.imx7ug-grid-wrapper.imx7ug-grid-cols-3 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.imx7ug-grid-wrapper.imx7ug-grid-cols-4,
.imx7ug-grid-wrapper.imx7ug-grid-cols-3,
.imx7ug-grid-wrapper.imx7ug-grid-cols-2 {
grid-template-columns: 1fr;
}
.imx7ug-grid-wrapper {
gap: 16px;
}
.imx7ug-grid-card {
padding: 16px 12px;
}
}
.imx7ug-author-box {
display: flex;
align-items: center;
gap: 14px;
box-sizing: border-box;
}
.imx7ug-author-box-reverse {
flex-direction: row-reverse;
}
.imx7ug-author-box-avatar {
flex-shrink: 0;
overflow: hidden;
}
.imx7ug-author-box-avatar img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.imx7ug-author-box-text {
display: flex;
flex-direction: column;
min-width: 0;
}
.imx7ug-author-box-date {
color: #555555;
}
.imx7ug-author-box-name a {
font-weight: 600;
text-decoration: none;
}
.imx7ug-author-box-name a:hover {
text-decoration: underline;
}
.imx7ug-pros-cons {
display: grid;
gap: 16px;
margin-bottom: 24px;
box-sizing: border-box;
}
.imx7ug-pros-cons.imx7ug-pros-cons--columns {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.imx7ug-pros-cons .imx7ug-pros-cons-col {
--imx7ug-pc-accent: #1f8f4e;
min-width: 0;
box-sizing: border-box;
}
.imx7ug-pros-cons.imx7ug-pros-cons--boxed .imx7ug-pros-cons-col {
background: #ffffff;
border: 1px solid #e0e0e0;
border-top: 3px solid var(--imx7ug-pc-accent);
border-radius: 8px;
padding: 16px 18px;
}
.imx7ug-pros-cons .imx7ug-pros-cons-heading {
margin: 0 0 10px;
padding: 0;
}
.imx7ug-pros-cons .imx7ug-pros-cons-heading.has-icon {
display: flex;
align-items: center;
gap: 8px;
}
.imx7ug-pros-cons .imx7ug-pros-cons-heading-icon {
display: inline-flex;
align-items: center;
flex: none;
line-height: 1;
}
.imx7ug-pros-cons .imx7ug-pros-cons-heading-icon svg {
display: block;
vertical-align: 0 !important;
}
.imx7ug-pros-cons .imx7ug-pros-cons-list {
display: flex;
flex-direction: column;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
.imx7ug-pros-cons .imx7ug-pros-cons-list > li {
display: flex;
align-items: baseline;
gap: var(--imx7ug-pc-icon-gap, 8px);
margin: 0;
padding: 0;
list-style: none;
}
.imx7ug-pros-cons .imx7ug-pros-cons-list > li::before,
.imx7ug-pros-cons .imx7ug-pros-cons-list > li::marker {
content: none;
}
.imx7ug-pros-cons .imx7ug-pros-cons-icon {
flex-shrink: 0;
color: var(--imx7ug-pc-accent);
font-weight: 700;
line-height: 1;
}
.imx7ug-pros-cons.imx7ug-pros-cons--icons-number .imx7ug-pros-cons-icon {
min-width: 1.2em;
font-variant-numeric: tabular-nums;
}
.imx7ug-pros-cons.imx7ug-pros-cons--icon-bg .imx7ug-pros-cons-list > li {
align-items: center;
}
.imx7ug-pros-cons.imx7ug-pros-cons--icon-bg .imx7ug-pros-cons-icon {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1em;
min-height: 1em;
box-sizing: content-box;
text-align: center;
}
.imx7ug-pros-cons .imx7ug-pros-cons-icon-line {
display: block;
flex-shrink: 0;
}
.imx7ug-pros-cons .imx7ug-pros-cons-icon-line::before {
content: "\200b";
}
.imx7ug-pros-cons.imx7ug-pros-cons--centered-icons .imx7ug-pros-cons-icon {
display: inline-block;
vertical-align: middle;
}
.imx7ug-pros-cons.imx7ug-pros-cons--centered-icons .imx7ug-pros-cons-icon.is-check-mark {
position: relative;
top: -0.025em;
}
.imx7ug-pros-cons.imx7ug-pros-cons--centered-icons .imx7ug-pros-cons-icon.is-cross-mark {
position: relative;
top: -0.08em;
}
.imx7ug-pros-cons .imx7ug-pros-cons-text {
min-width: 0;
}
.imx7ug-faq {
display: flex;
flex-direction: column;
gap: var(--imx7ug-faq-gap, 10px);
margin: 0 0 1.5em;
}
.imx7ug-faq-item {
border-style: solid;
border-width: var(--imx7ug-faq-border-width, 1px);
border-color: var(--imx7ug-faq-border-color, #dddddd);
border-radius: var(--imx7ug-faq-radius, 6px);
overflow: hidden;
background: var(--imx7ug-faq-a-bg, transparent);
}
.imx7ug-faq .imx7ug-faq-question {
margin: 0;
padding: 0;
font-size: var(--imx7ug-faq-q-size, 1.1em);
font-weight: var(--imx7ug-faq-q-weight, 600);
line-height: 1.4;
}
.imx7ug-faq .imx7ug-faq-toggle,
.imx7ug-faq .imx7ug-faq-toggle:hover,
.imx7ug-faq .imx7ug-faq-toggle:focus {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
width: 100%;
margin: 0;
padding: var(--imx7ug-faq-q-padding, 14px 18px);
border: 0;
border-radius: 0;
background: var(--imx7ug-faq-q-bg, transparent);
color: var(--imx7ug-faq-q-color, inherit);
font: inherit;
letter-spacing: inherit;
text-align: left;
text-transform: none;
text-decoration: none;
box-shadow: none;
cursor: pointer;
}
.imx7ug-faq .imx7ug-faq-toggle[aria-expanded="true"] {
background: var(--imx7ug-faq-q-open-bg, var(--imx7ug-faq-q-bg, transparent));
}
.imx7ug-faq .imx7ug-faq-toggle:focus-visible {
outline: 2px solid currentColor;
outline-offset: -4px;
}
.imx7ug-faq-icon {
display: flex;
flex: 0 0 auto;
align-items: center;
color: var(--imx7ug-faq-icon-color, currentColor);
}
.imx7ug-faq-icon svg {
display: block;
}
.imx7ug-faq-icon .imx7ug-faq-icon-open,
.imx7ug-faq-toggle[aria-expanded="true"] .imx7ug-faq-icon .imx7ug-faq-icon-closed {
display: none;
}
.imx7ug-faq-toggle[aria-expanded="true"] .imx7ug-faq-icon .imx7ug-faq-icon-open {
display: block;
}
.imx7ug-faq-answer {
padding: var(--imx7ug-faq-a-padding, 14px 18px);
color: var(--imx7ug-faq-a-color, inherit);
}
.imx7ug-faq-answer[hidden] {
padding: 0;
}
.imx7ug-faq-answer > :first-child {
margin-top: 0;
}
.imx7ug-faq-answer > :last-child {
margin-bottom: 0;
}