/*
Theme Name: Clotilde Jautrou
Author: Romain Fallet
Description: Thème personnalisé de Clotilde Jautrou
Version: 1.0.0
Text Domain: clotilde-jautrou
*/
@font-face {
  font-family: Comfortaa;
  font-weight: 500;
  src: url('/wp-content/themes/clotilde-jautrou/assets/fonts/comfortaa-regular.woff2') format('woff2');
}

@font-face {
  font-family: Comfortaa;
  font-weight: 300;
  src: url('/wp-content/themes/clotilde-jautrou/assets/fonts/comfortaa-thin.woff2') format('woff2');
}

@font-face {
  font-family: Comfortaa;
  font-weight: 800;
  src: url('/wp-content/themes/clotilde-jautrou/assets/fonts/comfortaa-bold.woff2') format('woff2');
}

@font-face {
  font-family: JrHand;
  font-weight: 500;
  src: url('/wp-content/themes/clotilde-jautrou/assets/fonts/jr-hand-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Abaya Libre';
  font-weight: 500;
  src: url('/wp-content/themes/clotilde-jautrou/assets/fonts/abhaya-libre-bold.woff2') format('woff2');
}

@font-face {
  font-family: 'Abaya Libre';
  font-weight: 300;
  src: url('/wp-content/themes/clotilde-jautrou/assets/fonts/abhaya-libre-regular.woff2') format('woff2');
}

:root {
  --grey-color-100: hsl(0, 0%, 98%);
  --grey-color-200: hsl(0, 0%, 88%);
  --grey-color-300: hsl(0, 0%, 78%);
  --grey-color-400: hsl(0, 0%, 68%);
  --grey-color-500: hsl(0, 0%, 58%);
  --grey-color-600: hsl(0, 0%, 48%);
  --grey-color-700: hsl(0, 0%, 38%);
  --grey-color-800: hsl(0, 0%, 28%);
  --grey-color-900: hsl(0, 0%, 11%);
  --red-color-100: hsl(333, 33%, 70%);
  --red-color-200: hsl(333, 33%, 60%);
  --red-color-300: hsl(333, 33%, 50%);
  --red-color-400: hsl(333, 33%, 40%);
  --red-color-500: hsl(333, 33%, 30%);
  --red-color-600: hsl(333, 33%, 25%);
  --red-color-700: hsl(333, 33%, 20%);
  --red-color-800: hsl(333, 33%, 15%);
  --red-color-900: hsl(333, 33%, 10%);
  --brown-color-100: hsl(25, 25%, 90%);
  --brown-color-200: hsl(25, 25%, 80%);
  --brown-color-300: hsl(25, 25%, 70%);
  --brown-color-400: hsl(25, 25%, 65%);
  --brown-color-500: hsl(25, 25%, 60%);
  --brown-color-600: hsl(25, 25%, 50%);
  --brown-color-700: hsl(25, 25%, 40%);
  --brown-color-800: hsl(25, 25%, 30%);
  --brown-color-900: hsl(25, 25%, 20%);
  --beige-color-500: hsl(43, 100%, 95%);
  --beige-color-600: hsl(43, 50%, 85%);
  --beige-color-700: hsl(43, 50%, 75%);
  --beige-color-800: hsl(43, 50%, 65%);
  --beige-color-900: hsl(43, 50%, 55%);
  --main-color-500: var(--beige-color-500);
  --main-color-600: var(--beige-color-600);
  --main-color-700: var(--beige-color-700);
  --main-color-800: var(--beige-color-800);
  --main-color-900: var(--beige-color-900);
  --action-color-100: var(--brown-color-100);
  --action-color-200: var(--brown-color-200);
  --action-color-300: var(--brown-color-300);
  --action-color-400: var(--brown-color-400);
  --action-color-500: var(--brown-color-500);
  --action-color-600: var(--brown-color-600);
  --action-color-700: var(--brown-color-700);
  --action-color-800: var(--brown-color-800);
  --action-color-900: var(--brown-color-900);
  --accent-color-900: var(--red-color-900);
  --accent-color-800: var(--red-color-800);
  --accent-color-700: var(--red-color-700);
  --accent-color-600: var(--red-color-600);
  --accent-color-500: var(--red-color-500);
  --accent-color-400: var(--red-color-400);
  --accent-color-300: var(--red-color-300);
  --accent-color-200: var(--red-color-200);
  --accent-color-100: var(--red-color-100);
  --error-color: hsl(0, 84%, 41%);
  --success-color: hsl(127, 77%, 43%);

  --size-n-16: -4rem;
  --size-n-12: -3rem;
  --size-n-10: -2.5rem;
  --size-n-8: -2rem;
  --size-n-6: -1.5rem;
  --size-n-4: -1rem;
  --size-n-5: -1.25rem;
  --size-n-3: -0.8rem;
  --size-n-2: -0.5rem;
  --size-n-1: -0.25rem;
  --size-n-0-25: -0.1rem;
  --size-n-0-5: -0.125rem;
  --size-0: 0rem;
  --size-0-25: 0.1rem;
  --size-0-5: 0.125rem;
  --size-1: 0.25rem;
  --size-2: 0.5rem;
  --size-3: 0.8rem;
  --size-4: 1rem;
  --size-5: 1.25rem;
  --size-6: 1.5rem;
  --size-7: 1.75rem;
  --size-8: 2rem;
  --size-10: 2.5rem;
  --size-12: 3rem;
  --size-16: 4rem;
  --size-20: 5rem;
  --size-26: 6.5rem;
  --size-32: 8rem;
  --size-34: 8.55rem;
  --size-48: 12rem;
  --size-56: 14rem;
  --size-64: 16rem;
  --size-72: 18rem;
  --size-80: 20rem;
  --size-96: 24rem;
  --size-128: 32rem;
  --size-136: 36rem;
  --size-160: 58rem;
  --size-192: 70rem;

  --shadow-s: 0 var(--size-0-5) var(--size-1) 0 rgb(0 0 0 / 15%);
  --shadow-m: 0 var(--size-1) var(--size-2) var(--size-n-0-5) rgb(0 0 0 / 15%),
    0 var(--size-1) var(--size-2) var(--size-n-0-5) rgb(0 0 0 / 15%);
  --shadow-l: 0 var(--size-2) var(--size-3) var(--size-n-1) rgb(0 0 0 / 15%),
    0 var(--size-2) var(--size-3) var(--size-n-1) rgb(0 0 0 / 15%);
  --shadow-xl: 0 var(--size-4) var(--size-5) var(--size-n-2) rgb(0 0 0 / 15%),
    0 var(--size-4) var(--size-5) var(--size-n-2) rgb(0 0 0 / 15%);
  --shadow-xxl: 0 var(--size-5) var(--size-6) var(--size-n-3) rgb(0 0 0 / 15%),
    0 var(--size-6) var(--size-8) var(--size-n-3) rgb(0 0 0 / 15%);
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
body {
  margin: 0;
}

.x-sr-only {
  position: absolute;
  overflow: hidden;
  width: 0.1rem;
  height: 0.1rem;
  padding: 0;
  border-width: 0;
  margin: -0.1rem;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

body {
  font-family: 'Comfortaa', Arial, Helvetica, sans-serif;
  font-weight: 300;
}

strong {
  font-weight: 800;
}

.header {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  padding: var(--size-2);
  background-color: var(--grey-color-900);
  color: var(--grey-color-100);
  font-family: 'Comfortaa', Arial, Helvetica, sans-serif;
}

.header__left-content {
  display: flex;
  gap: var(--size-2);
}

.header_mobile-menu-button {
  padding: var(--size-1) var(--size-2);
  border-radius: var(--size-1);
  border: var(--size-0-5) solid transparent;
  background: none;
  box-sizing: border-box;
  cursor: pointer;
}

.header_mobile-menu-button__icon {
  display: block;
  width: var(--size-6);
  height: var(--size-6);
  stroke: var(--grey-color-100);
}

.header__logo-link {
  padding: var(--size-1) var(--size-2);
  display: flex;
  align-items: center;
  gap: var(--size-2);
  text-decoration: none;
  border: var(--size-0-5) solid transparent;
  border-radius: var(--size-1);
}

.header__logo {
  width: var(--size-8);
  height: var(--size-8);
}

.header__text {
  color: var(--grey-color-100);
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.navigation-menu {
  height: 100%;
}
.navigation-menu--is-hidden {
  display: none;
}

.navigation-list {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-left: 0;
  list-style-type: none;
  gap: var(--size-2);
  align-items: center;
}

.navigation-list a {
  display: block;
  padding: var(--size-2) var(--size-3);
  color: var(--grey-color-100);
  font-size: var(--size-4);
  font-weight: 800;
  text-decoration: none;
  border-radius: var(--size-1);
  border: var(--size-0-5) solid transparent;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.navigation-list a:hover,
.header__logo-link:hover,
.header_mobile-menu-button:hover {
  border: var(--size-0-5) solid var(--grey-color-100);
}

.navigation-list a:focus,
.header__logo-link:focus,
.header_mobile-menu-button:focus {
  outline: var(--size-0-5) solid var(--grey-color-500);
  outline-offset: var(--size-0-5);
}

.intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--size-3);
  padding: var(--size-5) var(--size-4);
  background-color: var(--main-color-600);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: calc(100% + var(--size-20));
  text-align: center;
  color: var(--accent-color-500);
  min-height: var(--size-34);
}

.intro__title {
  display: flex;
  flex-direction: column;
  gap: var(--size-1);
  font-size: var(--size-6);
  font-family: 'Comfortaa', Arial, Helvetica, sans-serif;
}

.intro__title__highlight {
  font-size: var(--size-8);
}

.intro__description {
  font-size: var(--size-5);
  line-height: 1.2;
  font-family: JrHand, 'Times New Roman', Times, serif;
}

.section {
  display: flex;
  flex-direction: column;
  gap: var(--size-4);
  padding: var(--size-5) var(--size-4);
  background-color: var(--main-color-500);
}

.section__image-link {
  display: block;
}

.section__image-link:hover {
  opacity: 0.8;
}

.section__image-link:focus {
  border-radius: var(--size-0-5);
  outline: var(--size-0-5) solid var(--action-color-700);
  outline-offset: var(--size-1);
}

.section__image {
  display: block;
  width: 100%;
}

.section__image-description {
  font-size: var(--size-6);
  line-height: 1.2;
  font-family: Comfortaa, Arial, Helvetica, sans-serif;
  color: var(--accent-color-500);
}

.section__content,
.section__image-content,
.section__image-text {
  display: flex;
  flex-direction: column;
  gap: var(--size-4);
  color: var(--grey-color-900);
  line-height: 1.3;
}

.section__images-list,
.section__image {
  width: 75%;
  margin: auto;
}

.section__content > p a,
.section__image-content > p a {
  border-radius: var(--size-1);
  color: var(--action-color-600);
  font-weight: 800;
}

.section__content > p a:hover,
.section__image-content > p a:hover {
  color: var(--action-color-300);
}

.section__content > p a:focus,
.section__image-content > p a:focus {
  outline: var(--size-0-5) solid var(--action-color-700);
  outline-offset: var(--size-0-5);
}

.section__title,
.section__image-title {
  color: var(--accent-color-500);
  font-family: 'Comfortaa', Arial, Helvetica, sans-serif;
}

.section--dark {
  --main-color-500: var(--brown-color-500);
  --main-color-600: var(--brown-color-600);
  --main-color-700: var(--brown-color-700);
  --main-color-800: var(--brown-color-800);
  --main-color-900: var(--brown-color-900);
  --accent-color-500: var(--beige-color-500);
  --accent-color-600: var(--beige-color-500);
  --accent-color-700: var(--beige-color-600);
  --accent-color-800: var(--beige-color-800);
  --accent-color-900: var(--beige-color-900);

}

.section__cards {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
  flex-shrink: 1;
  gap: var(--size-6)
}

.separator {
  margin: 0;
  padding: 0 var(--size-4);
  background-color: var(--main-color-500);
  border: none;
}

.separator--dark {
  --main-color-500: var(--brown-color-500);
}

.separator::after {
  content: ' ';
  display: block;
  height: var(--size-0-5);
  background-color: var(--grey-color-400);
}

.separator--dark::after {
  background-color: var(--grey-color-700);
}

.card {
  width: 100%;
  box-shadow: var(--shadow-l);
  border-radius: var(--size-2);
}

.card__header {
  border-radius: var(--size-2) var(--size-2) 0 0;
  overflow: hidden;
}

.card__image {
  display: block;
  width: 100%;
}

.card__text {
  text-align: center;
  padding: var(--size-3) var(--size-4);
  border-radius: 0 0 var(--size-2) var(--size-2);
  background-color: var(--grey-color-100);
  font-family: Comfortaa, Arial, Helvetica, sans-serif;
}

.card__text-link,
.notification__text-link,
.media__text-link {
  display: block;
  padding: var(--size-2) var(--size-3);
  font-size: var(--size-4);
  font-weight: 800;
  border-radius: var(--size-1);
  border: var(--size-0-5) solid transparent;
  background-color: var(--action-color-500);
  color: var(--grey-color-100);
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: none;
  overflow: hidden;
}

.card__text-link:hover,
.notification__text-link:hover,
.media__text-link:hover {
  border: var(--size-0-5) solid var(--grey-color-800);
  background-color: var(--action-color-600);
}

.card__text-link:focus,
.notification__text-link:focus,
.media__text-link:focus {
  outline: var(--size-0-5) solid var(--action-color-700);
  outline-offset: var(--size-1);
}

.quote {
  display: flex;
  flex-direction: column;
  gap: var(--size-4);
  margin: 0;
  position: relative;
  padding-right: 10%;
  padding-left: 10%;
  font-family: JrHand, 'Times New Roman', Times, serif;
  color: var(--accent-color-500);
  overflow: hidden;
}

.quote::before,
.quote::after {
  position: absolute;
  top: 50%;
  line-height: 1;
  font-size: var(--size-64);
  opacity: 0.15;
  transform: translateY(-50%);
}

.quote::before {
  content: '«';
  left: 0;
}

.quote::after {
  content: '»';
  right: 0;
}

.quote__text {
  text-align: center;
  font-size: var(--size-5);
}

.quote__author {
  text-align: right;
}

.footer {
  display: flex;
  flex-direction: column;
  gap: var(--size-4);
  padding: var(--size-5) var(--size-4);
  background-color: var(--grey-color-900);
  color: var(--grey-color-100);
  font-family: 'Comfortaa', Arial, Helvetica, sans-serif;
}

.footer__copyright {
  text-align: center;
  font-size: var(--size-3);
}

.footer__navigation-list {
  display: flex;
  flex-direction: column;
  gap: var(--size-2);
  padding-left: 0;
  list-style-type: none;
  text-align: center;
}

.footer__navigation-list a {
  padding: var(--size-0-25) var(--size-2);
  border-radius: var(--size-1);
  color: var(--grey-color-100);
}

.footer__navigation-list a:hover {
  color: var(--grey-color-400);
}

.footer__navigation-list a:focus {
  outline: var(--size-0-5) solid var(--grey-color-500);
  outline-offset: var(--size-0-5);
}

.form {
  display: flex;
  flex-direction: column;
  gap: var(--size-4);
}

.input {
  --input-field-border-color: var(--accent-color-500);
  --input-field-background-color: var(--grey-color-100);
  --input-field-text-color: var(--grey-color-800);
  --input-field-icon-color: var(--action-color-500);

  display: flex;
  flex-direction: column;
  gap: var(--size-1);
}

.input--error {
  --input-field-border-color: var(--error-color);
  --input-field-icon-color: var(--error-color);
}

.input__field-container {
  position: relative;
}

.input__label {
  line-height: 1;
  font-family: 'Comfortaa', Arial, Helvetica, sans-serif;
  font-weight: 500;
}

.input__field {
  width: 100%;
  box-sizing: border-box;
  padding: var(--size-1) var(--size-3);
  border-width: var(--size-0-5);
  border-style: solid;
  border-color: var(--input-field-border-color);
  border-radius: var(--size-2);
  background-color: var(--input-field-background-color);
  box-shadow: var(--shadow-s);
  color: var(--input-field-text-color);
  font-family: Palanquin, sans-serif;
  font-size: var(--size-4);
  line-height: var(--size-6);
}

.input__field:focus {
  outline: var(--input-field-border-color) dashed var(--size-0-5);
  outline-offset: var(--size-0-5);
}

.input__field__icon {
  --icon-color: var(--input-field-icon-color);

  position: absolute;
  top: calc((100% - var(--size-5)) / 2);
  right: var(--size-4);
  width: var(--size-5);
  height: var(--size-5);
}

.input__field--with-icon {
  padding-right: var(--size-12);
}

.input__error {
  font-family: 'Comfortaa', Arial, Helvetica, sans-serif;
  line-height: 1;
  font-size: var(--size-4);
  color: var(--error-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.input__textarea {
  min-height: var(--size-48);
}

.button {
  --button-background-color: var(--accent-color-500);
  --button-border-color: var(--accent-color-500);
  --button-focus-border-color: var(--accent-color-500);
  --button-text-color: var(--base-color-100);
  --button-border-width: var(--size-0-5);
  --button-vertical-padding: var(--size-2);
  --button-horizontal-padding: var(--size-4);
  --button-font-size: var(--size-4);
  --text-color: var(--button-text-color);

  display: inline-block;
  padding: var(--button-vertical-padding) var(--button-horizontal-padding);
  border-width: var(--button-border-width);
  border-style: solid;
  border-color: var(--button-border-color);
  border-radius: var(--size-2);
  background-color: var(--button-background-color);
  box-shadow: var(--shadow-s);
  color: var(--button-text-color);
  cursor: pointer;
  font-size: var(--button-font-size);
  line-height: 1;
  text-decoration: none;
  font-family: Comfortaa, Arial, Helvetica, sans-serif;
}

.button:hover {
  --button-background-color: var(--accent-color-700);
}

.button:focus {
  outline: var(--button-focus-border-color) dashed var(--size-0-5);
  outline-offset: var(--size-0-5);
}

.button:active {
  box-shadow: none;
  transform: translateY(var(--size-0-5));
}

.button--outlined {
  --button-border-color: var(--accent-color-600);
  --button-focus-border-color: var(--accent-color-600);
  --button-background-color: transparent;
  --button-text-color: var(--accent-color-700);
}

.button--outlined:hover {
  --button-border-color: var(--accent-color-500);
  --button-background-color: transparent;
  --button-text-color: var(--accent-color-600);
}

.button--with-icon {
  --icon-color: var(--button-text-color);

  display: flex;
  align-items: center;
  padding-left: var(--size-3);
  gap: var(--size-1);
}

.h-captcha {
  height: 78px;
}

.h-captcha iframe {
  display: block;
}

.notification {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--size-5);
  background: var(--grey-color-100);
  border-radius: var(--size-2);
  width: 50%;
  padding: var(--size-8) var(--size-12);
  margin: auto;
  box-shadow: var(--shadow-l);
  font-family: Comfortaa, Arial, Helvetica, sans-serif;
}

.notification__icon {
  width: var(--size-32);
  height: var(--size-32);
}

.notification__icon--success {
  color: var(--success-color);
}

.notification__icon--error {
  color: var(--error-color);
}

.notification__text {
  line-height: 1;
}

.media {
  display: flex;
  flex-direction: column;
  gap: var(--size-4);
  align-items: center;
  padding: var(--size-4);
  border-radius: var(--size-2);
  background-color: var(--grey-color-500);
  box-shadow: var(--shadow-l);
  font-family: Comfortaa, Arial, Helvetica, sans-serif;
}

.media__header {
  border-radius: var(--size-2);
  overflow: hidden;
  box-shadow: inset var(--shadow-m);
  width: var(--size-48);
  height: var(--size-48);
  background-color: var(--grey-color-200);
  background-size: 40%;
  background-repeat: no-repeat;
  background-position: center;
}

.media__image {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  height: 100%;
}

.media__summary {
  display: flex;
  flex-direction: column;
  gap: var(--size-2);
  width: 100%;
}

.media__title,
.media__description {
  color: var(--grey-color-900);
}

.media__title {
  font-size: var(--size-5);
}

.media__link-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.media__link-icon-container {
  display: flex;
  gap: var(--size-2);
  align-items: center;
  padding: var(--size-2);
  border-radius: var(--size-1);
  background-color: var(--grey-color-200);
}

.media__link-icon {
  display: block;
  width: var(--size-4);
  height: var(--size-4);
}

.media__link-icon--podcast,
.media__header--podcast {
  background-image: url('/wp-content/themes/clotilde-jautrou/assets/images/icon-podcast.svg');
}

.media__link-icon--video,
.media__header--video {
  background-image: url('/wp-content/themes/clotilde-jautrou/assets/images/icon-video.svg');
}

.media__link-icon--article,
.media__header--article {
  background-image: url('/wp-content/themes/clotilde-jautrou/assets/images/icon-article.svg');
}

.media__link-icon-description {
  font-size: var(--size-3);
  font-weight: 500;
  color: var(--grey-color-700);
}

@media screen and (min-width: 1024px) {
  .header {
    gap: var(--size-2);
    padding: var(--size-2) var(--size-3);
    flex-direction: row;
  }

  .header_mobile-menu-button {
    display: none;
  }

  .header__logo-link {
    gap: var(--size-3);
    font-size: var(--size-4);
    padding: var(--size-2) var(--size-3);
  }

  .navigation-menu--is-hidden {
    display: initial;
  }

  .navigation-list {
    flex-direction: row;
  }

  .intro {
    gap: var(--size-16);
    padding-top: var(--size-32);
    padding-bottom: var(--size-32);
    background-size: 40%;
    background-position: 92% 50%;
  }

  .intro__title {
    gap: var(--size-12);
    font-size: var(--size-8);
  }

  .intro__title__highlight {
    font-size: var(--size-12);
  }

  .intro__description {
    font-size: var(--size-8);
  }

  .intro__title,
  .intro__description {
    width: var(--size-128);
  }

  .section {
    gap: var(--size-12);
    padding-top: var(--size-12);
    padding-bottom: var(--size-16);
  }

  .section__title,
  .section__image-title {
    text-align: center;
    font-size: var(--size-8);
  }

  .section__images-list,
  .section__image {
    width: 100%;
  }

  .section__image-description {
    font-size: var(--size-7);
  }

  .section__content,
  .section__image-content,
  .section__image-text {
    font-size: var(--size-6);
    gap: var(--size-6);
  }

  .section--image {
    flex-direction: row;
  }

  .section__image-content {
    flex-shrink: 3;
  }

  .section__image-title {
    text-align: left;
  }

  .section__images-list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .section__image-item {
    height: var(--size-96);
  }

  .section__cards {
    display: flex;
    justify-content: space-between;
  }

  .intro,
  .section,
  .separator {
    padding-left: 10%;
    padding-right: 10%;
  }

  .card {
    width: var(--size-64);
  }

  .footer__navigation-list {
    flex-direction: row;
    justify-content: right;
    list-style-type: initial;
  }

  .footer__navigation-list li {
    list-style-position: inside;
  }

  .footer__navigation-list li:first-child {
    list-style-type: none;
  }

  .quote {
    padding: 0 20% 0 20%;
  }
  .quote::before,
  .quote::after {
    font-size: var(--size-96);
  }

  .quote__text {
    font-size: var(--size-7);
  }

  .quote__author {
    font-size: var(--size-6);
  }

  .input {
    gap: var(--size-2);
  }

  .input__field {
    padding: var(--size-2) var(--size-4);
    font-size: var(--size-4);
  }

  .input__field--with-icon {
    padding-right: var(--size-12);
  }

  .button {
    --button-vertical-padding: var(--size-3);
    --button-horizontal-padding: var(--size-8);
    --button-font-size: var(--size-5);
  }

  .button--with-icon {
    --icon-size: var(--size-6);

    padding-left: var(--size-6);
    gap: var(--size-2);
  }

  .media {
    height: var(--size-56);
    flex-direction: row;
    gap: var(--size-8);
  }

  .media__header {
    flex-shrink: 0;
    width: var(--size-56);
    height: var(--size-56);
  }

  .media__summary {
    gap: var(--size-4);
  }

  .media__title {
    font-size: var(--size-7);
  }

  .media__description {
    font-size: var(--size-5);
  }

  .media__link-container {
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    flex-shrink: 2;
  }
}

@media screen and (min-width: 1280px) {
  .intro,
  .section,
  .separator {
    padding-left: 18%;
    padding-right: 18%;
  }
}

@media screen and (min-width: 1600px) {
  .header__logo {
    width: var(--size-10);
    height: var(--size-10);
  }

  .header__logo-link {
    gap: var(--size-4);
    font-size: var(--size-5);
    border-radius: var(--size-2);
  }

  .navigation-list a {
    font-size: var(--size-5);
    border-radius: var(--size-2);
  }

  .intro,
  .section,
  .separator {
    padding-left: 22%;
    padding-right: 22%;
  }

  .intro {
    background-size: 40%;
  }

  .intro__title {
    font-size: var(--size-10);
  }

  .intro__title__highlight {
    font-size: var(--size-16);
  }

  .intro__description {
    font-size: var(--size-10);
  }

  .intro__title,
  .intro__description {
    width: var(--size-136);
  }

  .section__title,
  .section__image-title {
    font-size: var(--size-10);
  }

  .section__image-content {
    flex-shrink: 3;
  }

  .section__content,
  .section__image-content,
  .section__image-text {
    font-size: var(--size-6);
    gap: var(--size-8);
  }

  .section__image-item {
    height: var(--size-128);
  }

  .section__image-content {
    flex-shrink: 5;
  }

  .card__text-link,
  .notification__text-link,
  .media__text-link {
    padding: var(--size-2) var(--size-3);
    font-size: var(--size-5);
  }

  .quote__text {
    text-align: center;
    font-size: var(--size-8);
  }

  .quote__author {
    font-size: var(--size-8);
  }

  .footer {
    padding: var(--size-8) var(--size-10);
  }

  .footer__copyright {
    text-align: center;
    font-size: var(--size-4);
  }

  .footer__navigation-list {
    font-size: var(--size-5);
  }

  .media__link-container {
    flex-shrink: 1.5;
  }
}

@media screen and (min-width: 1800px) {
  .intro,
  .section,
  .separator {
    padding-left: 24%;
    padding-right: 24%;
  }
}