/* Table of contents

  1. Variables
  2. Font embedding
  3. Scrollbar
  4. General styling
  5. Links and Buttons
  6. Forms and form elements (input, textarea, select, etc.)
  6.1 Sign-up form
  6.2 Custom radio buttons and checkboxes
  6.3 Text inputs (input, textarea, select, etc.)
  6.4 Login/Logout Modal and Form
  7. Survey box & News box
  8. Konto & Profil
  9. Punkte einlösen

  10. Accordion
  11. Footer
  11.1 Scroll to top button
  12. Cookie Modal
  13. Image Slider / Hero Section
  13.1 Text inside Image Slider / Hero Section
  14. Animations

  zz Media Queries


*/

/* 1. Variables */
:root {
  --clr-primary: hsl(356, 85%, 57%);
  --clr-primary_10: hsl(356, 85%, 57%, 0.1);
  --clr-secondary: hsl(210, 26%, 11%);
  --clr-accent: #33a3dc;
  --clr-accent-secondary: #287cb4;
  --coquelicot_20: hsla(12, 98%, 52%, 0.2);
  --clr-black: #191919;
  --clr-black_10: hsl(0, 0%, 0%, 0.1);
  --clr-black_20: hsl(0, 0%, 0%, 0.2);
  --clr-white: hsl(0, 0%, 100%);
  --clr-white_10: hsl(0, 0%, 100%, 0.1);
  --clr-white_20: hsl(0, 0%, 100%, 0.2);
  --clr-dark-grey: #404040;
  --clr-medium-grey: #666666;
  --clr-neutral-grey: #b2b2b2;
  --clr-light-grey: #cccccc;
  --clr-lighter-grey: #e5e5e5;
  --clr-silver-metallic: hsl(212, 9%, 67%);
  --clr-sonic-silver: hsl(0, 0%, 47%);
  --clr-cadet-gray: hsl(214, 15%, 62%);
  --clr-gainsboro: hsl(0, 0%, 88%);

  --max-width-small: 540px;
  --max-width-medium: 720px;
  --max-width-large: 960px;
  --max-width-super: 1140px;
  --spacer-horizontal-tiny: 0 4px;
  --spacer-horizontal-small: 0 8px;
  --spacer-horizontal-medium: 0 16px;
  --spacer-horizontal-large: 0 24px;
  --spacer-horizontal-xlarge: 0 32px;
  --spacer-horizontal-xxlarge: 0 40px;
  --spacer-horizontal-xxxlarge: 0 48px;
  --spacer-vertical-tiny: 4px 0;
  --spacer-vertical-small: 8px 0;
  --spacer-vertical-medium: 16px 0;
  --spacer-vertical-large: 24px 0;
  --spacer-vertical-xlarge: 32px 0;
  --spacer-vertical-xxlarge: 40px 0;
  --spacer-vertical-xxxlarge: 48px 0;
  --spacer-tiny: 4px;
  --spacer-small: 8px;
  --spacer-medium: 16px;
  --spacer-large: 24px;
  --spacer-xlarge: 32px;
  --spacer-xxlarge: 40px;
  --spacer-xxxlarge: 48px;
  --transition-duration-medium: 250ms;

  --fs-1: 3.8rem;
  --fs-2: 3rem;
  --fs-3: 2.5rem;
  --fs-4: 2rem;
  --fs-5: 1.8rem;
  --fs-6: 1.5rem;

  --section-padding: 80px;

  --shadow-1: 0 0 20px var(--clr-black_10);
  --shadow-2: 0px 10px 24px var(--clr-primary);

  --radius-10: 10px;
  --radius-8: 8px;
  --radius-5: 5px;

  --transition-1: 0.25s ease;
  --transition-2: 0.5s ease;

  --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);
  --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);
}

/* 2. Font embedding */
/* See Google fonts in <head> */

/* 3. Scrollbar */
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-thumb {
  background: var(--clr-primary);
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #fff;
  background-color: var(--clr-light-grey);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--clr-neutral-grey);
}

/* 4. General styling */
html {
  font-family: "Roboto", serif;
  font-size: 10px;
  scroll-behavior: smooth;
}

body {
  font-size: 1.6rem;
  line-height: 1.6;
  background-color: var(--clr-white);
  color: var(--clr-sonic-silver);
  font-variant-numeric: lining-nums;
  -moz-font-feature-settings: "lnum";
  -webkit-font-feature-settings: "lnum";
  font-feature-settings: "lnum";
}

.section {
  padding-block: var(--section-padding);
}

.rog-content,
.theme-header-container {
  padding-inline: 15px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Roboto Slab", serif;
  margin-block-end: 0;
}

h1,
h2,
h3 {
  line-height: 1.25;
}

h1 {
  font-size: var(--fs-1);
  font-weight: 600;
}

h2,
h3 {
  color: var(--clr-secondary);
  font-weight: 600;
}

.bg-dark {
  background-color: hsl(210, 26%, 11%);
  color: var(--clr-silver-metallic);
}

.bg-dark h1,
.bg-dark h2,
.bg-dark h3 {
  color: var(--clr-white);
}

h2 {
  font-size: var(--fs-2);
}
h3 {
  font-size: var(--fs-4);
}

#cookie-content .section-text:not(:last-of-type),
.rog-content .section-text:not(:last-of-type) {
  margin-block-end: 15px;
}

.section-text {
  font-size: var(--fs-6);
}

.section-text + ul li {
  list-style-type: disc;
}

.hero-subtitle,
.section-subtitle {
  font-weight: 700;
  text-transform: uppercase;
  max-width: max-content;
}

.section-subtitle {
  background-color: var(--clr-primary_10);
  color: var(--clr-primary);
  padding: 8px 20px;
  border-radius: var(--radius-8);
  margin-inline: auto;
}

.section-title {
  margin-block: 18px 35px;
}

.bg-image-one {
  background-image: url(../images/hero-bg-for-dark-bg.png);
}

li {
  list-style: none;
}

.theme-primary,
.theme-hover-primary:hover {
  color: var(--clr-white);
  background-color: var(--clr-primary);
}

.theme-secondary,
.theme-hover-secondary:hover {
  color: var(--clr-black);
  background-color: var(--clr-lighter-grey);
}

.theme-black,
.theme-hover-black:hover {
  color: white;
  background-color: var(--clr-black);
}

.theme-dark-grey,
.theme-hover-dark-grey:hover {
  color: white;
  background-color: #404040;
  background-color: var(--clr-dark-grey);
}

.theme-text-primary,
.theme-hover-text-primary:hover {
  color: var(--clr-primary) !important;
}

.theme-text-black,
.theme-hover-text-black:hover {
  color: var(--clr-black) !important;
}

.theme-text-white,
.theme-hover-text-white:hover {
  color: var(--clr-white) !important;
}

.padding-horizontal-medium {
  padding: 0 16px;
  padding: var(--spacer-horizontal-medium);
}

.caption {
  display: none;
}

label {
  display: block;
}

.has-bg-image {
  background-repeat: no-repeat;
  background-position: top left;
}

.has-before,
.has-after {
  position: relative;
  z-index: 1;
}

.has-before::before,
.has-after::after {
  content: "";
  position: absolute;
}

.rog-modal-content {
  border-radius: var(--radius-10);
}

/* 5. Links and Buttons */

a {
  color: var(--clr-primary);
  text-decoration: none;
}

.rog-button,
input[type="submit"],
input[type="button"],
button:not(.theme-nav-burger--button):not(.slick-arrow),
.survey_link,
.bestellen_link_box a,
.bonus_link_box a {
  /* General */
  border: none;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  max-width: max-content;
  /* theme */
  background-color: var(--clr-primary);
  color: var(--clr-white);
  padding: 15px 35px;
  font-size: var(--fs-6);
  text-transform: uppercase;
  font-weight: 500;
  padding: 15px 35px;
  border-radius: var(--radius-8);
  transition: var(--transition-1);
}

.rog-button:hover,
.rog-button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="button"]:hover,
input[type="button"]:focus,
button:not(.theme-nav-burger--button):hover,
button:not(.theme-nav-burger--button):focus,
.survey_link:hover,
.survey_link:focus,
.bestellen_link_box a:hover,
.bestellen_link_box a:focus,
.bonus_link_box a:hover,
.bonus_link_box a:focus {
  background-color: var(--clr-secondary);
}

.rog-button:active,
input[type="submit"]:active,
input[type="button"]:active,
button:active,
.survey_link:active,
.bestellen_link_box a:active,
.bonus_link_box a:active {
  background-color: var(--clr-secondary) !important;
}

/* 6. Forms and form elements (input, textarea, select, etc.) */

form {
  background-color: var(--clr-lighter-grey);
  padding: var(--spacer-xxxlarge);
  margin-bottom: var(--spacer-medium);
  border-radius: calc(var(--radius-10) - 2px);
  isolation: isolate;
  position: relative;
}

form[name="passVergessen"] input[type="submit"] {
  display: block;
}

form:is(:last-child) {
  margin-bottom: 0;
}

/* 6.1 Sign-up form */
form.new_opt_in {
  padding: 16px;
}
.sign-up {
  border-radius: var(--radius-10);
}

.selbsteregistierte {
  width: 100%;
}

.new_opt_in > :not(:last-child) {
  padding-bottom: var(--spacer-medium);
}

.selbstregistrierten_field {
  padding: 8px 0;
  padding: var(--spacer-vertical-small);
}

.selbstregistrierten_field:first-child {
  padding-top: 0;
  padding-bottom: 0;
}

.selbstregistrierten_field:last-child {
  padding-bottom: 0;
}

#website {
  display: inline;
  height: 1px;
  width: 1px;
  opacity: 0;
  pointer-events: none;
}

label.selbstregistrierung {
  display: block;
}

#errorExplanation {
  max-width: 100%;
}

/* 6.2 Custom radio buttons and checkboxes */
.rog-selection-container {
  display: inline-block;
  position: relative;
  padding-left: 25px;
  margin-bottom: 2px;
  margin-right: var(--spacer-large);
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.rog-selection-container p {
  margin-top: -2px;
}

/* -- Hide the browser's default radio button */
.rog-selection-container input {
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
  pointer-events: none;
}

/* -- Create a custom radio button */
.rog-selection.rog-radiobutton {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: white;
  border: 1px solid #666666;
  border: 1px solid var(--clr-medium-grey);
  border-radius: 50%;
}

/* -- Create a custom checkbox */
.rog-selection.rog-checkbox {
  position: absolute;
  top: 2px;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: var(--clr-white);
  border: 1px solid var(--clr-neutral-grey);
}

/* -- On mouse-over, add a grey background color */
.rog-selection-container:hover input ~ .rog-selection {
  border: 1px solid var(--clr-medium-grey);
}

/* -- When the radio button is checked, add a blue background */
.rog-selection-container input:checked ~ .rog-selection {
  border: 1px solid var(--clr-primary);
}

/* -- Create the indicator (the dot/circle - hidden when not checked) */
.rog-selection:after {
  content: "";
  position: absolute;
  display: none;
}

/* -- Show the indicator (dot/circle) when checked */
.rog-selection-container input:checked ~ .rog-selection:after {
  display: block;
}

/* -- Style the radio button indicator (dot/circle) */
.rog-selection-container .rog-selection.rog-radiobutton:after {
  top: 4px;
  left: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--clr-primary);
}

/* -- Style the checkbox indicator */
.rog-selection-container .rog-selection.rog-checkbox:after {
  left: 4px;
  top: 4px;
  width: 10px;
  height: 10px;
  background-color: var(--clr-primary);
}
.promotion_container {
  margin-top: var(--spacer-medium);
}

/* 6.3 Text inputs (input, textarea, select, etc.) */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
select,
textarea {
  background-color: white;
  border: 2px solid transparent;
  border-bottom: 2px solid #b2b2b2;
  border-bottom: 2px solid var(--clr-neutral-grey);
  padding: 8px;
  padding: var(--spacer-small);
  width: 100%;
  max-width: 480px;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  border-bottom: 2px solid #ffb800;
  border-bottom: 2px solid var(--clr-secondary);
  outline: 0;
}

/* 6.4 Login/Logout Modal and Form */

.rog-modal-content--header {
  --rog-modal-content--header-height: 32px;
  height: 40px;
  height: var(--rog-modal-content--header-height);
}

.rog-button.rog-display-topright {
  background-image: none;
  display: flex !important;
  padding: 0 !important;
  width: 40px;
  height: 40px;
  width: calc(var(--rog-modal-content--header-height) * 1.2);
  height: calc(var(--rog-modal-content--header-height) * 1.2);
  border-top-left-radius: 0;
  /* border-top-right-radius: 0; */
  border-bottom-right-radius: 0;
  align-items: center;
  justify-content: center;
  max-width: none;
}

.rog-modal-form--container > * {
  padding: var(--spacer-vertical-small);
}

.rog-modal-form--container > *:last-child:is(:empty) {
  padding: 0;
}

.rog-modal-form--container > *:last-child:not(:empty) {
  padding-bottom: 0;
}

.rog-modal-form--container > div:first-of-type {
  padding-top: 0;
}

.rog-modal-form--container > div:last-of-type {
  padding-bottom: 0;
}

.rog-login-form-wrapper {
  padding-top: var(--spacer-large);
  padding-bottom: var(--spacer-large);
}

/* 7. Survey box & News box*/

#surveys_outer,
#news_outer {
  background-color: #e5e5e5;
  background-color: var(--clr-lighter-grey);
  padding: 16px;
  padding: var(--spacer-medium);
  margin-bottom: 16px;
  margin-bottom: var(--spacer-medium);
  border-radius: calc(var(--radius-10) - 2px);
}

.surveys_header,
#news_label {
  background-color: #33a3dc;
  background-color: var(--clr-accent);
  color: white;
  padding: 0 8px;
  padding: var(--spacer-horizontal-small);
  display: inline-block;
  margin: 0;
  margin-bottom: 16px;
  margin-bottom: var(--spacer-medium);
}

.survey-box {
  padding: 8px 0;
  padding: var(--spacer-vertical-small);
}

.survey-box:first-child {
  padding-top: 0;
}

.survey-box:last-child {
  padding-bottom: 0;
}

#start_news > p {
  margin: 0;
}

.survey_header,
.newsparagraph {
  font-weight: bold;
}

.newsparagraph + p {
  padding-bottom: 16px;
  padding-bottom: var(--spacer-medium);
}

#start_news > p:nth-last-child(2) {
  padding-bottom: 0;
}

/* 8. Konto & Profil */

/* 8.1 Konto */
.konto_part_1 > div,
.konto_part_2 > div {
  padding: 8px 0;
  padding: var(--spacer-vertical-small);
}

.konto_part_1 > div:first-child,
.konto_part_1 > div.vornamebox {
  padding-top: 0;
}

.konto_part_2 > div:last-child {
  padding-bottom: 0;
}

.genderbox,
.birthdatebox,
.languagebox,
.strassebox,
.hausnummerbox,
.plzbox,
.stadtbox {
  display: none;
}

/* 8.2 Profil */

.propertyueber > .propouterdiv {
  margin-bottom: 32px;
  margin-bottom: var(--spacer-xlarge);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
}

.propertyueber > .propouterdiv:nth-last-child(2) {
  margin-bottom: 16px;
  margin-bottom: var(--spacer-medium);
}

.plusminus {
  /* display: none; */
}

.propertyfieldset {
  border: none;
  margin: 0;
  padding: 0;
}

.propertyfieldsetlegend {
  background-color: #33a3dc;
  background-color: var(--clr-accent);
  color: white;
  padding: 0 8px;
  padding: var(--spacer-horizontal-small);
  display: inline-block;
  margin-bottom: 4px;
  margin-bottom: var(--spacer-tiny);
}

.prop_div > div:nth-child(odd) {
  padding-top: 8px;
  padding-top: var(--spacer-small);
}

.prop_div > div:nth-child(even) {
  padding-bottom: 8px;
  padding-bottom: var(--spacer-small);
}

.prop_div > div:first-child {
  padding-top: 0;
}

.prop_div > div:last-child {
  padding-bottom: 0;
}

/* 9. Punkte einlösen */
.bonusbox {
  margin-top: 12px;
  border: 1px solid var(--clr-primary_10);
  padding: 8px;
}
.praemientable .praemien_kontostand {
  display: none;
}
.bonus_link_box {
  font-weight: bold;
}
.bonus_link_box .imagebox {
  margin-top: 5px;
}
.bonusrow:last-child {
  margin-top: 8px;
}

/* 10. Accordion */
.rog-accordion {
  background-color: var(--clr-secondary);
  border: 1px solid var(--clr-neutral-grey);
  cursor: pointer;
  padding: var(--spacer-medium);
  position: relative;
  margin-bottom: var(--spacer-medium);
  overflow: hidden;
  border-radius: 4px;
}

.dark-bg .rog-accordion:hover {
  background-color: var(--clr-white_10);
}

.rog-accordion > .rog-accordion--headline-row {
  position: relative;
  padding-right: 32px;
}

.rog-accordion > .rog-accordion--headline-row > svg.chevron-pointing-up,
.rog-accordion > .rog-accordion--headline-row > svg.chevron-pointing-down {
  fill: var(--clr-accent-secondary);
  height: 16px;
  position: absolute;
  right: 8px;
  top: 50%;
  top: calc(50% - 8px);
  width: 16px;
}

.rog-accordion > .rog-accordion--headline-row > svg.chevron-pointing-up {
  display: none;
}

.rog-accordion > .rog-accordion--headline-row > svg.chevron-pointing-down {
  display: block;
}

.rog-accordion.active
  > .rog-accordion--headline-row
  > svg.chevron-pointing-down {
  display: none;
}

.rog-accordion.active > .rog-accordion--headline-row > svg.chevron-pointing-up {
  display: block;
}

.rog-accordion > .rog-accordion--text {
  border-left: 2px solid var(--clr-primary);
  padding: 0 16px;
  padding: var(--spacer-horizontal-medium);
  height: 0;
  overflow: hidden;
}

.rog-accordion.active > .rog-accordion--text {
  height: auto;
  margin-top: 8px;
  margin-top: var(--spacer-small);
}

/* 11. Footer */

.theme-footer {
  --scroll-to-top-dimensions: 48px;
  text-align: center;
  border-top: 0px solid var(--clr-accent);
  position: relative;
  padding: 24px 48px;
  padding: calc(var(--scroll-to-top-dimensions) / 2)
    var(--scroll-to-top-dimensions);
}

.theme-footer > .theme-footer-nav {
  margin: 0px auto;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.theme-footer-nav > * {
  flex: 1;
  padding: 4px 8px 8px;
  border-radius: 4px;
}

.theme-footer-link {
  font-weight: bold;
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
}

.theme-footer-link:hover {
  background-color: #404040;
  background-color: var(--clr-dark-grey);
}

.theme-footer-link > span {
  position: relative;
}

.theme-footer-link > span:after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  height: 1px;
  width: 100%;
  background-color: white;
  transform: scaleX(0);
  transition: transform var(--transition-duration-medium) ease;
}

.theme-footer-link:hover > span:after,
.theme-footer-link:focus > span:after,
.theme-footer-link.selected > span:after {
  transform: scaleX(1);
}

/* 11.1 Scroll to top button */

.scroll-to-top {
  text-align: center;
  font-size: 10px;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  height: 48px;
  width: 48px;
  height: var(--scroll-to-top-dimensions);
  width: var(--scroll-to-top-dimensions);
  max-width: none;
  transition: width var(--transition-duration-medium) ease,
    padding-right var(--transition-duration-medium) ease;
}

.scroll-to-top > div:first-child > div {
  fill: #287cb4;
  fill: var(--clr-accent-secondary);
  height: 16px;
  width: 16px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.scroll-to-top > div:nth-of-type(3) {
  margin-top: -4px;
}

.scroll-to-top:hover {
  padding-right: 20px;
  width: 70px;
}

/* 12. Cookie Modal */

#cookie-wrapper {
  display: none;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999999;
  background-color: rgba(147, 149, 151, 0.7);
  overflow: hidden;
  padding-inline: 15px;
}

#cookie-content {
  display: block;
  position: relative;
  top: 130px;
  padding: 16px;
  margin: auto;
  background-color: var(--clr-white);
  width: 100%;
  max-width: 500px;
  border-radius: var(--radius-10);
  box-shadow: 0 4px 10px 0 rgb(0 0 0 / 20%), 0 4px 20px 0 rgb(0 0 0 / 19%);
}

/* 13. Image Slider / Hero Section */

.slick {
  max-width: 480px;
}

/* 13.1 Text inside Image Slider / Hero Section */

.full-width-media__caption {
  position: absolute;
  top: 98%;
  left: 15.5%;
  transform: translate(-15.5%, -98%);
}

.hero {
  color: var(--clr-white);
  text-align: center;
  padding-block-start: calc(var(--section-padding) + 80px);
  padding-block-end: 0;
  overflow: hidden;
}

.hero::after {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 240px;
  background-color: var(--clr-primary);
  z-index: -1;
}

.hero-content {
  margin-block-end: 90px;
}

.hero-subtitle {
  background-color: var(--clr-white_10);
  color: var(--clr-white);
  margin-inline: auto;
  padding: 5px;
  padding-inline-end: 15px;
  border-radius: var(--radius-8);
}

.hero-subtitle .strong {
  display: inline-block;
  background-color: var(--clr-primary);
  padding: 2px 15px;
  margin-inline-end: 15px;
  border-radius: var(--radius-5);
}

.hero-title {
  margin-block: 30px 8px;
}

.hero .section-text {
  margin-block-end: 40px;
}

.hero .btn {
  margin-inline: auto;
}

.hero-banner {
  position: relative;
}

.circle {
  position: absolute;
}

.circle {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -56%);
  width: 100%;
  z-index: -1;
  animation: rotate360 15s linear infinite;
}

.mt-103 {
  margin-top: 103px;
}

@keyframes rotate360 {
  0% {
    transform: translate(-50%, -56%) rotate(0);
  }
  100% {
    transform: translate(-50%, -56%) rotate(1turn);
  }
}

.circle-2 {
  animation-direction: reverse;
}

/* 14. Animations */

@keyframes slideIn {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

/* zz Media Queries */
@media (min-width: 575px) {
  :root {
    --fs-1: 5.8rem;
    --fs-2: 4rem;
  }

  .hero-subtitle,
  .section-subtitle {
    font-size: var(--fs-5);
  }

  .hero-content {
    padding-inline: 40px;
  }

  .hero-subtitle .strong {
    padding-block: 6px;
  }

  .hero::after {
    height: 340px;
  }
}

@media (min-width: 768px) {
  :root {
    --spacer-horizontal-tiny: 0 2px;
    --spacer-horizontal-small: 0 4px;
    --spacer-horizontal-medium: 0 8px;
    --spacer-horizontal-large: 0 12px;
    --spacer-horizontal-xlarge: 0 16px;
    --spacer-horizontal-xxlarge: 0 20px;
    --spacer-horizontal-xxxlarge: 0 24px;
    --spacer-tiny: 2px;
    --spacer-small: 4px;
    --spacer-medium: 8px;
    --spacer-large: 12px;
    --spacer-xlarge: 16px;
    --spacer-xxlarge: 20px;
    --spacer-xxxlarge: 24px;
    --transition-duration-medium: 250ms;

    --fs-2: 4.5rem;
  }

  .hero-banner {
    max-width: max-content;
    margin-inline: auto;
  }
}

@media (min-width: 992px) {
  .hero {
    background-size: contain;
    text-align: left;
    color: var(--clr-cadet-gray);
  }

  .hero::before {
    content: "";
    position: absolute;
    top: -1000px;
    left: -500px;
    width: 1500px;
    height: 1500px;
    background-image: radial-gradient(
      circle,
      var(--coquelicot_20) 20%,
      transparent 70% 100%
    );
    z-index: -1;
  }

  .hero .rog-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 25px;
  }

  .hero-content {
    padding-inline: 0;
    margin-block-end: 0;
  }

  .hero-subtitle,
  .hero .btn {
    margin-inline: 0;
  }

  .hero::after {
    width: 330px;
    height: 100%;
    left: auto;
    right: 0;
  }
  form.new_opt_in {
    padding: 24px;
  }
}

@media (min-width: 1200px) {
  :root {
    --fs-1: 7rem;
    --fs-2: 5.5rem;
    --fs-4: 2.2rem;
    --fs-5: 2rem;
    --section-padding: 120px;
  }

  .section-subtitle {
    --fs-5: 2.2rem;
  }
}
/******************/
/** 13.2 jSuccess CSS **/
/******************/
#jSuccess {
  max-width: 730px;
}