:root {
    /* Light mode colors */
    --HS-light-mode-HS-TURQUOISE: rgba(39, 129, 143, 1);
    --HS-light-mode-HS-TURQUOISE-DARK: rgba(0, 97, 111, 1);
    --HS-light-mode-AM-BLUE: rgba(0, 78, 155, 1);
    --HS-light-mode-HS-NIGHT-BLUE: rgba(0, 25, 76, 1);
    --HS-light-mode-HS-AQUA: rgba(0, 184, 224, 1);
    --HS-light-mode-HS-PEARL: rgba(233, 234, 237, 1);
    --HS-light-mode-HS-SNOW: rgba(255, 255, 255, 1);
    --HS-light-mode-HS-ROSE: rgba(183, 56, 75, 1);
    --AM-light-mode-AM-DEFAULT: rgba(131, 61, 217, 1);
    --HS-light-mode-HS-PURPLE: rgba(156, 77, 255, 1);
    --HS-light-mode-HS-ORANGE: rgba(243, 111, 33, 1);
    --HS-light-mode-HS-FOREST-GREEN: rgba(105, 140, 75, 1);
    --HS-light-mode-HS-GREEN: rgba(166, 206, 57, 1);
    --HS-light-mode-HS-GRAY-10: rgba(25, 25, 25, 1);
    --HS-light-mode-HS-GRAY-20: rgba(43, 43, 43, 1);
    --HS-light-mode-HS-GRAY-30: rgba(72, 72, 72, 1);
    --HS-light-mode-HS-GRAY-40: rgba(111, 111, 111, 1);
    --HS-light-mode-HS-GRAY-50: rgba(153, 153, 153, 1);
    --HS-light-mode-HS-GRAY-60: rgba(205, 205, 205, 1);
    --HS-light-mode-HS-GRAY-70: rgba(236, 236, 238, 1);
    --HS-light-mode-HS-GRAY-80: rgba(248, 248, 248, 1);
    --HS-light-mode-HS-WARNING-RED: rgba(208, 52, 44, 1);
    --HS-light-mode-HS-WARNING-RED-DARK: rgba(138, 12, 0, 1);
    --HS-light-mode-HS-BABY-BLUE: rgba(191, 208, 222, 1);
    --HS-light-mode-HS-PALE-BLUE: rgba(235, 244, 245, 1);
    --HS-light-mode-HS-PALE-YELLOW: rgba(255, 250, 209, 1);
    --HS-light-mode-HS-YELLOW: rgba(255, 253, 67, 1);
    --HS-light-mode-HS-RED: rgba(173, 15, 0, 1);
    --AM-light-mode-BLUE: rgba(0, 78, 155, 1);
    --AM-light-mode-AM-BLUE-DARK: rgba(5, 61, 113, 1);
    --HS-light-mode-WHITE: rgba(255, 255, 255, 1);
    /* /Light mode colors */

    /* Dark mode colors */
    --HS-dark-mode-HS-TURQUOISE: rgba(94, 177, 191, 1);
    --HS-dark-mode-HS-TURQUOISE-DARK: rgba(54, 124, 135, 1);
    --HS-dark-mode-HS-BLUE: rgba(54, 137, 214, 1);
    --HS-dark-mode-HS-NIGHT-BLUE: rgba(0, 66, 122, 1);
    --HS-dark-mode-HS-AQUA: rgba(0, 184, 224, 1);
    --HS-dark-mode-HS-PEARL: rgba(16, 16, 16, 1);
    --AM-dark-mode-AM-GRAY-10: rgba(255, 255, 255, 1);
    --AM-dark-mode-AM-BLUE: rgba(41, 128, 237, 1);
    --AM-dark-mode-AM-BRIGHT-BLUE: rgba(53, 154, 252);
    --HS-dark-mode-HS-ROSE: rgba(216, 86, 101, 1);
    --HS-dark-mode-HS-PINK: rgba(212, 114, 178, 1);
    --HS-dark-mode-HS-PURPLE: rgba(188, 116, 255, 1);
    --HS-dark-mode-HS-ORANGE: rgba(243, 111, 33, 1);
    --HS-dark-mode-HS-FOREST-GREEN: rgba(101, 145, 71, 1);
    --HS-dark-mode-HS-GREEN: rgba(166, 206, 57, 1);
    --HS-dark-mode-HS-GRAY-10: rgba(255, 255, 255, 1);
    --HS-dark-mode-HS-GRAY-20: rgba(248, 248, 248, 1);
    --HS-dark-mode-HS-GRAY-30: rgba(205, 205, 205, 1);
    --HS-dark-mode-HS-GRAY-40: rgba(153, 153, 153, 1);
    --HS-dark-mode-HS-GRAY-50: rgba(64, 64, 64, 1);
    --HS-dark-mode-HS-GRAY-60: rgba(51, 51, 51, 1);
    --HS-dark-mode-HS-GRAY-70: rgba(25, 25, 25, 1);
    --HS-dark-mode-HS-GRAY-80: rgba(0, 0, 0, 1);
    --HS-dark-mode-HS-WARNING-RED: rgba(208, 52, 44, 1);
    --HS-dark-mode-HS-WARNING-RED-DARK: rgba(138, 12, 0, 1);
    --HS-dark-mode-HS-BABY-BLUE: rgba(88, 88, 90, 1);
    --HS-dark-mode-HS-PALE-BLUE: rgba(36, 50, 65, 1);
    --HS-dark-mode-HS-PALE-YELLOW: rgba(51, 51, 51, 1);
    --HS-dark-mode-HS-YELLOW: rgba(94, 93, 37, 1);
    --HS-dark-mode-HS-RED: rgba(255, 71, 75, 1);
    --HS-dark-mode-BLACK: rgba(0, 0, 0, 1);
    --HS-dark-mode-WHITE: rgba(255, 255, 255, 1);
    /* /Dark mode colors */


    /* Common Margins */
    --margin-bottom-desktop: 16px;
    --margin-bottom-tablet: 16px;
    --margin-bottom-mobile: 16px;

    --margin-bottom-semi-desktop: 12px;
    --margin-bottom-semi-tablet: 12px;
    --margin-bottom-semi-mobile: 12px;

    --margin-bottom-half-desktop: 8px;
    --margin-bottom-half-tablet: 8px;
    --margin-bottom-half-mobile: 8px;

    --separator-1px: 1px solid var(--HS-light-mode-HS-GRAY-60);

    /* Area offset */
    --area-offset-desktop: -70px;
    --area-offset-tablet: -50px;
    --area-offset-mobile: 0px;

    /* Header height */
    --header-height-desktop: 500px;
    --header-height-tablet: 350px;
    --header-height-mobile: 200px;

    /* Header logo width */
    --header-logo-width-desktop: 80px;
    --header-logo-width-tablet: 80px;
    --header-logo-width-mobile: 48px;

    /* Header logo height */
    --header-logo-height-desktop: 80px;
    --header-logo-height-tablet: 80px;
    --header-logo-height-mobile: 48px;


    /* Colors and backgrounds */
    --body-text-color: var(--HS-light-mode-HS-GRAY-10);
    --body-background: var(--HS-light-mode-HS-GRAY-80);

    --header-text-color: var(--HS-light-mode-WHITE);
    --header-background-image: url('../images/Opiskelijasivu_AL_SK_mies_ja_koira_1600x1030.jpg');
    /* --header-background-image: linear-gradient(0deg, rgba(218, 32, 39, 0.75) 0%, rgba(218, 32, 39, 0.75) 100%); */
    /* --header-background-image: none;
    --header-background-color: rgba(218, 32, 39, 1); */
    --header-logo-background-image: url(../images/Aamulehti_Ikoni_nega_1024x1024.svg);


    --card-background: var(--HS-light-mode-HS-SNOW);
    --card-border-color: transparent;

    --product-name-color: var(--HS-light-mode-HS-GRAY-10);

    --sale-percentage-color: var(--HS-light-mode-HS-SNOW);
    --sale-percentage-background: var(--AM-light-mode-AM-DEFAULT);

    --product-image-1: url("../images/SK_digi_740x370.png");
    --product-image-2: url("../images/SK_digi_740x370.png");
    --product-image-3: url("../images/SKLS_lasu_74.png");
    --product-image-4: url("../images/SKLS_jokapai.png");


    --reading-rights-color: var(--HS-light-mode-HS-GRAY-10);
    --reading-rights-digi1-background: transparent url("../images/icon-user.svg") top left no-repeat;
    --reading-rights-digi4-background: transparent url("../images/icon-multiple-users.svg") top left no-repeat;
    --reading-rights-facsimile-background: transparent url("../images/icon-facsimile.svg") top left no-repeat;

    --product-price-color: var(--HS-light-mode-HS-GRAY-10);
    --product-price-normal-color: var(--HS-light-mode-BLACK);

    --product-action-color: var(--HS-light-mode-HS-SNOW);
    --product-action-background: var(--AM-light-mode-BLUE);
    --product-action-hover-background: var(--AM-light-mode-AM-BLUE-DARK);

    --product-compare-color: var(--HS-light-mode-HS-GRAY-10);
    --product-compare-background: transparent url("../images/icon-arrow-up.svg") center right no-repeat;
    --product-compare-open-background: transparent url("../images/icon-arrow-down.svg") center right no-repeat;

    --product-details-heading-color: var(--HS-light-mode-HS-GRAY-10);
    --product-details-item-color: var(--HS-light-mode-HS-GRAY-10);
    --product-details-item-background: transparent url("../images/icon-checked.svg") top left no-repeat;
    --product-details-item-not-color: var(--HS-light-mode-HS-GRAY-50);
    --product-details-item-not-background: none;

    --testimonial-background: var(--HS-light-mode-HS-SNOW);
    --testimonial-quote-color: var(--HS-light-mode-HS-GRAY-50);
    --testimonial-text-color: var(--HS-light-mode-HS-GRAY-10);
    --testimonial-commentator-text-color: var(--HS-light-mode-HS-GRAY-50);

    /* --cancellation-info-color: rgba(25, 25, 25, 1); */

}

body.header-special {
    /* Header height */
    --header-height-desktop: 700px;
    --header-height-tablet: 500px;
    --header-height-mobile: 300px;

    /* Colors and backgrounds */
    --header-text-color: var(--HS-light-mode-WHITE);
    --header-background-color: #000;
    --header-background-image: url('../images/is-landing-page-banner-special.png');
    --header-disclaimer-color: #fff;

    --header-button-text-color: rgba(255, 255, 255, 1);
    --header-button-background-color: rgba(218, 32, 39, 1);
    --header-button-hover-color: #b30202;
    --header-button-border-color: white;

}

@media (prefers-color-scheme: dark) {
    :root {
        /* Colors and backgrounds */

        --body-text-color: var(--HS-dark-mode-HS-GRAY-10);
        --body-background: var(--HS-dark-mode-HS-GRAY-80);

        --header-text-color: var(--HS-dark-mode-WHITE);
        --header-background-image: url('../images/Opiskelijasivu_AL_SK_mies_ja_koira_1600x1030.jpg');
        /* --header-background-image: none;
        --header-background-color: rgba(10, 10, 10, 1);
        */
        --header-logo-background-image: url(../images/Aamulehti_Ikoni_nega_1024x1024.svg);

        --card-background: var(--HS-dark-mode-HS-GRAY-60);
        --card-border-color: transparent;

        --product-name-color: var(--HS-dark-mode-HS-GRAY-10);

        --sale-percentage-color: var(--AM-dark-mode-AM-GRAY-10);
        --sale-percentage-background: var(--HS-dark-mode-HS-PINK);


        /* --product-image-1: url("../images/pr1-nega.png");
        --product-image-2: url("../images/pr2-nega.png");
        --product-image-3: url("../images/pr3-nega.png");
        --product-image-4: url("../images/pr4-nega.png"); */


        --reading-rights-color: var(--HS-dark-mode-HS-GRAY-10);
        --reading-rights-digi1-background: transparent url("../images/icon-user-dark.svg") top left no-repeat;
        --reading-rights-digi4-background: transparent url("../images/icon-multiple-users-dark.svg") top left no-repeat;
        --reading-rights-facsimile-background: transparent url("../images/icon-facsimile-dark.svg") top left no-repeat;

        --product-price-color: var(--HS-dark-mode-HS-GRAY-10);
        --product-price-normal-color: var(--HS-dark-mode-HS-GRAY-30);

        --product-action-color: var(--AM-dark-mode-AM-GRAY-10);
        --product-action-background: var(--AM-dark-mode-AM-BLUE);
        --product-action-hover-background: var(--AM-dark-mode-AM-BRIGHT-BLUE);

        --product-compare-color: var(--HS-dark-mode-HS-GRAY-10);
        --product-compare-background: transparent url("../images/icon-arrow-up-dark.svg") center right no-repeat;
        --product-compare-open-background: transparent url("../images/icon-arrow-down-dark.svg") center right no-repeat;

        --product-details-heading-color: var(--HS-dark-mode-HS-GRAY-10);
        --product-details-item-color: var(--HS-dark-mode-HS-GRAY-10);
        --product-details-item-background: transparent url("../images/icon-checked-dark.svg") top left no-repeat;
        --product-details-item-not-color: var(--HS-dark-mode-HS-GRAY-40);
        --product-details-item-not-background: none;

        --testimonial-background: var(--HS-dark-mode-HS-SNOW);
        --testimonial-quote-color: var(--HS-dark-mode-HS-GRAY-10);
        --testimonial-text-color: var(--HS-dark-mode-HS-GRAY-10);
        --testimonial-commentator-text-color: var(--HS-dark-mode-HS-GRAY-40);

        /* --cancellation-info-color: rgba(240, 235, 230, 1); */

    }
}


/* RESET */
/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* /RESET */

body {
    font-family: Metric, sans-serif;
    font-size: 15px;
    color: var(--body-text-color);
    background: var(--body-background);
}

* {
    box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    line-height: normal;
    line-height: 1;
}

.hidden {
    display: none;
}

.page-container {
    /* margin: 0 auto 16px; */
    text-align: center;
    vertical-align: top;
    position: relative;
}


.header {
    min-height: var(--header-height-desktop);
    margin: 0;
    padding: 0;
    background-size: cover;
    background-position: center top;
    background-color: var(--header-background-color);
    background-image: var(--header-background-image);
    color: var(--header-text-color);
    /* display: flex;
    flex-direction: column;
    justify-content: center; */

}

.header,
.header * {
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

.header .inner {
    min-height: var(--header-height-desktop);
    margin: 0 auto;
    padding: 0 16px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* justify-items: center; */
}

.header .logo {
    display: inline-block;
    width: var(--header-logo-width-desktop);
    height: var(--header-logo-height-desktop);
    margin-bottom: 16px;
    background-size: auto 100%;
    background-position: center top;
    background-image: var(--header-logo-background-image);
    position: absolute;
    top: 0px;
    left: 0px;
    /*-webkit-mask: var(--header-logo-background-image) no-repeat 100% 100%;
    mask: var(--header-logo-background-image) no-repeat 100% 100%;
    -webkit-mask-size: cover;
    mask-size: cover;
    background-color: #F8F8F8;
    */
}

.header .titles {
    margin-top: 5em;
}

.header .title {
    font: normal 900 72px/1.1 Metric, sans-serif;
    color: var(--header-text-color);
    margin-bottom: 16px;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.header .subtitle {
    font: normal 700 32px/1.15 Metric, sans-serif;
    color: var(--header-text-color);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}


/* Header special */
/*
#header-special {
    min-height: 700px;
}
*/

/*
#header-special .countdown {
    margin: 1em 0;
}

#header-special .countdown span {
    display: inline-block;
    border: 1px solid var(--header-button-border-color);
    background: var(--header-button-background-color);
    border-radius: 6px;
    padding: 5px 10px;
    margin-right: 5px;
    font-weight: 400;
    font-size: 16px;
    color: var(--header-button-text-color);
    min-width: 65px;
}

.hss-align-aid .countdown span:last-child {
    min-width: 68px;
}

#header-special .countdown span>b {
    font-weight: 900;
    font-size: 32px;
    color: var(--header-button-border-color);
}

#header-special .button {
    display: inline-block;
    text-decoration: none;
    color: var(--header-button-text-color);
    background: var(--header-button-background-color);
    padding: 16px;
    font: normal 700 22px/1 "Helsingin", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    border: 1px solid var(--header-button-border-color);
    margin-bottom: var(--margin-bottom-desktop);
}

#header-special .button:hover {
    background-color: var(--header-button-hover-color);
}

#header-special .disclaimer {
    font: normal 700 18px/1.2 "Helsingin", Helvetica, Arial, sans-serif;
    color: var(--header-disclaimer-color);
}
*/


/* /Header special */


.area {
    background: transparent;
    margin: 0 auto 20px;
    padding: 10px;
    position: relative;
    top: var(--area-offset-desktop);
}


.combo {
    position: relative;
    /* 4x292px + 3x16px gaps = 1168 + 48 = 1216 */
    /* max-width: 1216px; */
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 16px;
}

/* Normal card */
.combo .card {
    background: var(--card-background);
    border: 1px solid var(--card-border-color);
    /* width: 292px; */
    border-radius: 4px;
    /* padding: 24px 20px; */
    padding: 0;
    display: flex;
    flex-direction: column;
    /* justify-content: flex-end; */
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.15);
    position: relative;
}


/* Product header */
.product-header {
    margin: 32px 0 var(--margin-bottom-desktop);
    min-height: 80px;
    display: flex;
    flex-direction: row;
    justify-items: center;
    align-items: center;
}

.sale-percentage {
    font: normal 500 14px/1.42 Metric, sans-serif;
    color: var(--sale-percentage-color);
    background: var(--sale-percentage-background);
    padding: 2px 6px;
    border-radius: 2px 1px 1px 1px;
    position: absolute;
    top: -1px;
    left: -1px;
}


.product-name {
    font: normal 700 26px/1.33 Metric, sans-serif;
    color: var(--product-name-color);
    width: 100%;
    margin: 0 16px;
}

/* /Product header */

/* Product info */
.product-info {
    margin: 0 0 var(--margin-bottom-desktop);
    min-height: 210px;
}

.product-image {
    width: 250px;
    height: 144px;
    /* height: 125px; */
    margin: 0 auto var(--margin-bottom-desktop);
    background-color: transparent;
    background-position: top left;
    background-repeat: no-repeat;
    background-size: contain;
    /* background-size: 100%;*/
}

.pr1 .product-image {
    background-image: var(--product-image-1);
}

.pr2 .product-image {
    background-image: var(--product-image-2);
}

.pr3 .product-image {
    background-image: var(--product-image-3);
}

.pr4 .product-image {
    background-image: var(--product-image-4);
}


/*
.product-image img {
    height: auto;
    max-width: 100%;
}
*/


.reading-rights {
    width: 175px;
    margin: 0 auto;
}

.reading-rights li {
    font: normal 400 14px/1.2 Metric, sans-serif;
    margin: 0 0 var(--margin-bottom-half-desktop);
    background-size: 1.125rem;
    padding-left: 1.5rem;
    text-align: left;
    color: var(--reading-rights-color);
}

.reading-rights li.digi1 {
    background: var(--reading-rights-digi1-background);
}

.reading-rights li.digi4 {
    background: var(--reading-rights-digi4-background);
}

.reading-rights li.facsimile {
    background: var(--reading-rights-facsimile-background);
}

/* /Product info */

/* Product footer */
.product-footer {
    display: flex;
    flex-direction: column;
}

.product-price {}

.price {
    font: normal 400 14px/1.42 Metric, sans-serif;
    margin: 0 0 var(--margin-bottom-half-desktop);
    color: var(--product-price-color);
}

.price span {
    font: normal 700 30px/1.33 Metric, sans-serif;
}

.price-normal {
    font: normal 400 14px/1.42 Metric, sans-serif;
    margin: 0 0 var(--margin-bottom-desktop);
    color: var(--product-price-normal-color);
    position: relative;
}

.price-normal:before {
    position: absolute;
    content: "";
    left: 50%;
    top: 50%;
    right: 0;
    border-top: 1px solid var(--product-price-normal-color);
    opacity: 1;
    /* -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg); */
    width: 40%;
    margin-left: -20%;
    transform: rotate(-5deg);
    width: 115px;
}


.price-normal span {}



.product-action {
    margin: 0 0 var(--margin-bottom-desktop);
}

.product-action .button {
    display: inline-block;
    text-decoration: none;
    color: var(--product-action-color);
    background: var(--product-action-background);
    padding: 12px 24px;
    font: normal 500 16px/1 Metric, sans-serif;
    text-transform: none;
    border-radius: 100px;

}

.product-action .button:hover {
    background: var(--product-action-hover-background);
}

.product-compare {
    border-top: var(--separator-1px);
    /* margin: 0 -20px; */
}

.product-compare span {
    display: inline-block;
    color: var(--product-compare-color);
    background: var(--product-compare-background);
    padding: 12px;
    font: normal 400 16px/1 Metric, sans-serif;
    text-transform: none;
    background-size: 1rem;
    padding-right: 1.5rem;
    cursor: pointer;
}


.product-compare.open span {
    background: var(--product-compare-open-background);
    background-size: 1.125rem;
}

.product-details {
    /* display: none; */
    opacity: 0.0;
    height: 0;
    transition: all 0.2s linear;
    margin: 0 32px;
}

.product-details.visible {
    opacity: 1.0;
    height: auto;
    /* display: block; */
}

.product-details-heading {
    font: normal 700 14px/1.42 Metric, sans-serif;
    color: var(--product-details-heading-color);
    margin: 0 0 var(--margin-bottom-semi-desktop);
    text-align: left;
}

.product-details-list {
    margin-bottom: var(--margin-bottom-desktop);
    border-bottom: var(--separator-1px);
    padding-bottom: 4px;
}

.product-details-list:last-of-type {
    border-bottom: none;
}


.product-details-list li {
    text-align: left;
    font: normal 400 14px/1.42 Metric, sans-serif;
    color: var(--product-details-item-color);
    margin: 0 0 var(--margin-bottom-semi-desktop);
    padding-left: 1.5rem;
    background-size: 1.125rem;
    background: var(--product-details-item-background);
}



.product-details-list li.not-included {
    color: var(--product-details-item-not-color);
    background: var(--product-details-item-not-background);
}




/*
.cancellation-info {
    font: normal 400 14px/1.2 "Helsingin", Helvetica, Arial, sans-serif;
    color: var(--cancellation-info-color);

}
*/

/* /Product footer */


/* /Normal card */


.combo-footer {
    width: 100%;
}

.combo-footer p {}

/* Testimonial */
.testimonial {
    background: var(--testimonial-background);
    text-align: left;
    padding: 30px 60px;
    position: relative;

}

.testimonial:before,
.testimonial:after {
    content: '\201D';
    color: var(--testimonial-quote-color);
    font: normal 900 80px/1 Metric, sans-serif;
    position: absolute;
}

.testimonial:before {
    left: 10px;
    top: 10px;
}

.testimonial:after {
    right: 10px;
    bottom: -40px;
}


.testimonial .text {
    font: italic 400 16px/1.2 Metric, sans-serif;
    color: var(--testimonial-text-color);
    margin-bottom: var(--margin-bottom-desktop);
}

.testimonial .commentator {
    font: italic 400 16px/1.2 Metric, sans-serif;
    color: var(--testimonial-commentator-text-color);
}

/* /Testimonial */



/* DESKTOP */
/* 4 Cards on row */
/* 4x292px + 3x16px gaps = 1168 + 48 = 1216 */
/* 1216 and more */
/* +area paddings 10+10=20 */
@media only screen and (min-width: 1236px) {

    .area {
        width: 1236px;
    }

    .header .inner,
    .combo {
        width: 1216px;
    }

    .combo .card {
        width: 292px;
    }

}


/* TABLET */
/* 2 Cards on row */
/* 2x292px wide items + 16px gap between = 600 */
/* between 600 and 1215 */
/* +area paddings 10+10=20 */
@media only screen and (min-width: 620px) and (max-width: 1235px) {

    /*#header-special {
        min-height: 500px;
    }*/

    .header,
    .header .inner {
        min-height: var(--header-height-tablet);
    }

    .header .logo {
        width: var(--header-logo-width-tablet);
        height: var(--header-logo-height-tablet);
    }

    .header .title {
        font-size: 51px;
        margin-bottom: var(--margin-bottom-tablet);
    }

    .header .subtitle {
        font-size: 27px;
    }


    .area {
        top: var(--area-offset-tablet);
    }


    .header .inner,
    .combo {
        /* min-width: 600px;
        max-width: 1215px; */
        max-width: 600px;
    }

    .combo .card {
        /* width: calc(50% - 16px); */
        width: 292px;
    }


}

/* MOBILE */
/* 1 Card on row */
/* below 599 */
/* +area paddings 10+10=20 */
@media only screen and (max-width: 619px) {
    /*#header-special {
        min-height: 300px;
    }*/

    .header,
    .header .inner {
        min-height: var(--header-height-mobile);
    }

    .header .logo {
        width: var(--header-logo-width-mobile);
        height: var(--header-logo-height-mobile);
    }

    .header .title {
        font-size: 28px;
        margin-bottom: var(--margin-bottom-mobile);
    }

    .header .subtitle {
        font-size: 18px;
    }


    .area {
        top: var(--area-offset-mobile);
    }


    .header .inner,
    .combo {
        max-width: 599px;
    }

    .combo .card {
        /* width: 100%; */
        width: 292px;
    }

}


/*
@media (prefers-color-scheme: dark) {

    body {

        color: var(--body-text-color);
        background: var(--body-background);
        background: rgba(255, 255, 255, 1);
    
        background-color: #101010;
        color: #fff;
    }
}
*/