/*
  Responsive layer of the Regular theme.

  Loaded after main.css. The desktop stylesheets are not modified: everything below 1184px
  (the former minimum page width) is handled here, inside media queries.

  Breakpoints
    <= 1183px  tablet landscape / small laptop : fluid page, burger navigation
    <=  767px  tablet portrait / phone         : stacked layouts
    <=  550px  phone                           : compact spacing and typography

  Sections
    1. Base (elements that exist only for small screens, hidden on desktop)
    2. Page frame
    3. Header and navigation drawer
    4. Typography
    5. Footer
    6. Shared components
    7. Pages
*/

/* ==========================================================================
   1. Base
   ========================================================================== */

.navbar__burger,
.navbar__nav-toggle,
.navbar__overlay,
.navbar__nav-menu-item--mobile,
.header-accueil__toggle,
.creations-card__menu-btn {
  display: none;
}

/* ==========================================================================
   2. Page frame
   ========================================================================== */

@media (max-width: 1183px) {
  .page-wrapper {
    min-width: 0;
  }

  img {
    max-width: 100%;
  }
}

/* ==========================================================================
   3. Header and navigation drawer
   ========================================================================== */

@media (max-width: 1183px) {
  .navbar {
    position: relative;
    align-items: center;
    padding: 14px 16px;
    min-height: 56px;
  }

  .navbar__burger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: -6px 0 -6px -10px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
  }

  /* logo centred between the burger and the cart, as on the mobile mockups */
  .navbar__logo-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    line-height: 0;
  }

  .navbar__logo {
    width: 168px;
    height: auto;
  }

  /* --- drawer --- */
  .navbar__nav-menu {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1001;
    width: 320px;
    max-width: 86vw;
    margin: 0;
    padding: 12px 0 32px;
    display: block;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: #1d1d1d;
    box-sizing: border-box;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

  body.nav-open .navbar__nav-menu {
    transform: translateX(0);
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.5);
  }

  .navbar__overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.5);
  }

  body.nav-open .navbar__overlay {
    display: block;
  }

  .navbar__nav-menu-item,
  .navbar__nav-menu-item--mobile {
    display: block;
    position: relative;
    margin: 0;
    padding: 0 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .navbar__nav-menu-item::after {
    display: none;
  }

  .navbar__nav-menu-item > a {
    display: block;
    padding: 17px 44px 17px 0;
    text-decoration: none;
  }

  .navbar__nav-menu-item > a.navbar__item-text {
    display: block;
  }

  .navbar__item-text {
    font-size: 12px;
    white-space: normal;
  }

  /* account links at the end of the drawer */
  .navbar__nav-menu-item--mobile > a {
    display: block;
    padding: 17px 0;
    text-decoration: none;
  }

  .navbar__nav-menu-item--action {
    padding-top: 24px;
    border-bottom: none;
    text-align: center;
  }

  .navbar__nav-menu-item--action > a.btn {
    padding: 18px 16px 16px;
    color: #ffffff;
    text-align: center;
  }

  .navbar__nav-menu-item--action > a.navbar__item-text {
    padding: 16px 0 0;
    text-transform: none;
    letter-spacing: normal;
  }

  /* sub menu toggle (added by script in _Header.cshtml) */
  .navbar__nav-toggle {
    display: block;
    position: absolute;
    top: 0;
    right: 8px;
    width: 50px;
    height: 50px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
  }

  .navbar__nav-toggle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: -7px 0 0 -5px;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(45deg);
    transition: transform 0.2s;
  }

  .menu--open > .navbar__nav-toggle::before {
    margin-top: -2px;
    transform: rotate(-135deg);
  }

  /* sub menus: plain lists inside the drawer, opened by the toggle, never by hover */
  .menu::before,
  .menu:hover::before {
    display: none;
  }

  .navbar__nav-menu .menu-wrapper,
  .navbar__nav-menu .menu:hover .menu-wrapper {
    display: none;
    position: static;
    transform: none;
    padding: 0 0 12px;
  }

  .navbar__nav-menu .menu--open .menu-wrapper,
  .navbar__nav-menu .menu--open:hover .menu-wrapper {
    display: block;
  }

  .navigation-menu {
    display: block;
    width: auto;
    padding: 0;
    border: none;
    box-shadow: none;
    background: none;
  }

  .navigation-menu__list {
    padding: 0;
  }

  .navigation-menu__item {
    margin: 0;
    padding: 8px 0 8px 12px;
  }

  .navigation-menu__item-title {
    display: block;
    margin: 0;
    color: #ffffff;
    opacity: 0.85;
    text-transform: none;
    letter-spacing: normal;
  }

  .navigation-menu__price {
    font-size: 12px;
  }

  .navigation-menu__image-wrapper,
  .navigation-menu__item-image-wrapper {
    display: none;
  }

  /* --- right side: cart only; the account links live in the drawer --- */
  .navbar__personal-menu {
    display: flex; /* the /album stylesheet hides it on small screens */
    align-items: center;
  }

  .navbar__personal-menu-item.menu,
  .navbar__personal-menu-item--pro {
    display: none;
  }

  .navbar__personal-menu-item::after {
    display: none;
  }

  .navbar__personal-menu .menu-wrapper {
    right: -8px;
    max-width: calc(100vw - 16px);
  }

  /* --- promotion strip --- */
  .promotion {
    padding: 10px 16px;
  }
}

/* ==========================================================================
   4. Typography
   ========================================================================== */

@media (max-width: 767px) {
  .headline-1 {
    font-size: 36px;
    line-height: 1.1;
  }

  .headline-2 {
    font-size: 30px;
    line-height: 1.13;
  }

  .headline-3 {
    font-size: 25px;
  }

  .headline-4 {
    font-size: 20px;
  }

  .body-1 {
    font-size: 18px;
    line-height: 1.55;
  }

  .body-3 {
    font-size: 15px;
    line-height: 1.6;
  }
}

/* ==========================================================================
   5. Footer
   ========================================================================== */

@media (max-width: 1183px) {
  .footer__menu {
    padding: 32px 0 0;
    column-count: 3;
  }
}

@media (max-width: 767px) {
  .footer {
    padding: 24px 16px 32px;
  }

  .footer__content-wrapper {
    flex-direction: column;
    margin-bottom: 24px;
  }

  .footer__content-block {
    width: 100%;
    padding: 32px 0;
    border-right: none;
    border-bottom: 2px solid #f2f2f2;
  }

  .footer__content-block:last-child {
    border-bottom: none;
  }

  .footer__form {
    width: 100%;
    max-width: 374px;
  }

  .footer__menu {
    padding-top: 24px;
    column-count: 2;
  }
}

/* ==========================================================================
   6. Shared components
   ========================================================================== */

/* ---------- tablet landscape / small laptop ---------- */
@media (max-width: 1183px) {
  /* hero */
  .header-page {
    padding-left: 64px;
  }

  .header-page__text-wrapper--slide {
    left: 64px;
  }

  .header-page__breadcrumbs {
    left: 32px;
  }

  .header-page__image-wrapper-premium {
    left: auto;
    right: 0;
  }

  /* text blocks */
  .info {
    padding: 64px 48px 72px;
  }

  .banner--premium {
    padding-left: 64px;
  }

  .banner-365__text-wrapper {
    padding: 96px 0 96px 64px;
  }

  /* cards: three per row down to tablet portrait */
  .card-list {
    margin-left: -16px;
    margin-right: -16px;
  }

  .card {
    width: calc(33.333% - 32px);
    margin: 16px;
  }

  .card--large,
  .card--w432 {
    width: calc(50% - 32px);
  }

  .card__image-wrapper {
    height: auto;
    aspect-ratio: 330 / 409;
  }

  .image-card {
    width: calc(50% - 32px);
    height: 400px;
    margin: 16px;
  }

  /* captions are revealed on hover on desktop: always visible on touch screens */
  .image-card__title {
    display: block;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  }
}

/* ---------- tablet portrait / phone ---------- */
@media (max-width: 767px) {
  .content-wrapper {
    padding: 0 16px;
  }

  .line::after,
  .line-top::before {
    width: calc(100% - 32px);
  }

  .title {
    padding-top: 40px;
  }

  .title--pt88 {
    padding-top: 48px;
  }

  .title--w33p {
    width: auto;
  }

  /* in-page navigation: one scrollable line */
  .page-navigation {
    padding: 16px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .page-navigation__item {
    display: inline-block;
    margin: 0 12px;
  }

  .breadcrumbs-wrapper {
    padding: 12px 16px 16px;
  }

  .breadcrumbs {
    flex-wrap: wrap;
  }

  /* hero: text over the picture, full width */
  .header-page {
    height: auto;
    min-height: 400px;
    padding: 72px 16px 40px;
  }

  .header-page--master {
    padding-top: 72px;
  }

  .header-page--about {
    height: auto;
    min-height: 280px;
    padding: 48px 16px;
  }

  .header-page__text-wrapper,
  .header-page__text-wrapper--w400,
  .header-page__text-wrapper--w416,
  .header-page__text-wrapper--w425,
  .header-page__text-wrapper--w450,
  .header-page__text-wrapper--w480 {
    width: 100%;
    max-width: 480px;
  }

  .header-page__text-wrapper--slide {
    left: 16px;
    right: 16px;
    width: auto;
    max-width: none;
  }

  .header-page__title--height {
    min-height: 0;
  }

  .header-page__breadcrumbs {
    left: 16px;
    right: 16px;
  }

  .header-page__carousel {
    min-height: 400px;
  }

  /* the slides fill the hero whatever its height */
  .header-page__carousel .slick-list,
  .header-page__carousel .slick-track {
    height: 100%;
  }

  /* some titles carry an inline desktop width */
  .header-page__title {
    max-width: 100%;
  }

  /* banners */
  .banner {
    height: auto;
    min-height: 260px;
    padding: 40px 16px;
  }

  .banner__title {
    width: auto;
    max-width: 352px;
  }

  .banner__content-premium {
    width: auto;
  }

  .banner--premium {
    height: auto;
    padding-left: 16px;
  }

  .banner-365__text-wrapper {
    padding: 48px 16px;
  }

  .banner-price-365 {
    padding: 64px 16px;
  }

  .banner-price-365__text-wrapper {
    width: auto;
    max-width: 480px;
  }

  /* text blocks */
  .info,
  .info--small {
    padding: 48px 16px 56px;
  }

  .info__column {
    width: 100%;
  }

  .info__card-list {
    margin: -12px -16px;
  }

  .info__card {
    width: calc(50% - 32px);
    margin: 14px 16px;
  }

  /* cards: two per row */
  .card-list {
    padding: 16px 0 48px;
    margin-left: -8px;
    margin-right: -8px;
  }

  .card-list--tous:last-child {
    padding-bottom: 48px;
  }

  .card,
  .card--large,
  .card--w432 {
    width: calc(50% - 16px);
    margin: 8px 8px 24px;
  }

  .card__text,
  .card__text--ln-5 {
    height: auto;
  }

  .image-card {
    width: calc(100% - 16px);
    height: auto;
    aspect-ratio: 4 / 3;
    margin: 8px;
  }

  /* pop-ups use the whole screen width */
  .pop-up-scrollbar {
    padding: 56px 8px;
  }
}

/* ---------- phone ---------- */
@media (max-width: 550px) {
  .info__card {
    width: calc(100% - 32px);
  }

  .card--large,
  .card--w432 {
    width: calc(100% - 16px);
  }

  .btn {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ---------- catalog pages: format strip ---------- */
@media (max-width: 767px) {
  .format-wrapper {
    padding-bottom: 48px;
  }

  .format-select {
    flex-direction: column;
    align-items: center;
    padding: 16px;
    box-sizing: border-box;
  }

  .format-select__title {
    margin: 0 0 12px;
  }

  .format-select__list {
    flex-wrap: wrap;
    justify-content: center;
  }

  .format-select__size {
    line-height: 2;
  }

  /* strip of book formats: a Swiper carousel, dragged with the finger */
  .horizontal-images-wrapper__image--ruler {
    left: 16px;
  }

  .horizontal-images__subtitle {
    opacity: 0.6;
  }

  .horizontal-images:hover .horizontal-images__drag-icon {
    display: none;
  }
}

/* ---------- product page (gallery + options) ---------- */
@media (max-width: 1183px) {
  .detail-wrapper {
    padding-bottom: 64px;
  }

  .select-image-wrapper {
    width: 46%;
  }

  .select-image__large-image-wrapper {
    width: calc(100% - 64px);
    height: auto;
    aspect-ratio: 448 / 582;
  }

  .detail-list-wrapper {
    width: 54%;
    padding-left: 32px;
  }
}

@media (max-width: 767px) {
  /* gallery on top, thumbnails in a row under the picture, options below */
  .detail-wrapper {
    flex-direction: column;
    padding: 0 16px 48px;
  }

  .select-image-wrapper {
    width: 100%;
    margin-bottom: 24px;
  }

  .select-image {
    position: static;
    flex-direction: column-reverse;
  }

  .select-image__menu {
    display: flex;
    margin: 12px 0 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .select-image__small-image-wrapper {
    flex-shrink: 0;
    margin: 0 8px 0 0;
  }

  .select-image__large-image-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1;
  }

  .detail-list-wrapper {
    width: 100%;
    padding-left: 0;
  }

  .detail__category-wrapper {
    margin-bottom: 20px;
  }

  .resume {
    margin-left: 0;
    margin-right: 0;
  }

  .resume__item-title {
    width: 120px;
    flex-shrink: 0;
  }
}

/* ---------- login / registration (ported from the former 1j1p mobile stylesheet) ---------- */
@media (max-width: 767px) {
  .auth-wrapper {
    display: block;
    padding: 32px 10px 0;
  }

  .auth__tabs {
    width: 100%;
  }

  .auth__tab {
    flex: 1 1 50%;
    min-width: 0;
  }

  .auth__tab-title {
    width: 100%;
  }

  .auth__tab-title-text {
    letter-spacing: 1.5px;
  }

  .auth__tab-image-block {
    display: none;
  }

  .auth__tab-form-block {
    width: 100%;
    padding: 32px 16px;
  }

  .auth__tab-body {
    margin-bottom: 48px;
  }
}

@media (max-width: 360px) {
  .auth__tab-title-text {
    letter-spacing: 1px;
  }
}

/* ==========================================================================
   7. Account pages: greeting header, Mon Matisseo, small pop-ups
   ========================================================================== */

@media (max-width: 1183px) {
  /* greeting header ("Bonjour ...") with the account section tabs */
  .header-accueil {
    height: auto;
    min-height: 220px;
    padding: 0 16px;
  }

  .header-accueil__breadcrumbs {
    left: 16px;
  }

  .header-accueil__content {
    min-width: 0;
  }

  .header-accueil__title {
    padding: 56px 0 24px;
    text-align: center;
  }

  /* tabs stay on one line: centred when they fit, scrollable when they do not */
  .header-accueil__tabs {
    justify-content: flex-start;
    padding: 20px 0 28px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .header-accueil__tabs::-webkit-scrollbar {
    display: none;
  }

  .header-accueil__tab {
    flex: 0 0 auto;
    margin: 0 16px;
    white-space: nowrap;
  }

  .header-accueil__tab:first-child {
    margin-left: auto;
  }

  .header-accueil__tab:last-child {
    margin-right: auto;
  }

  /* two columns become one: the list first, the side blocks below it */
  .compte-wrapper {
    flex-direction: column;
    padding-bottom: 64px;
  }

  /* page title line (title + sort menu) stays one line */
  .compte-wrapper--top {
    flex-direction: row;
    align-items: center;
    padding: 40px 0 0;
  }

  .compte-large-column,
  .compte-small-column {
    width: 100%;
  }

  .compte-small-column {
    margin-top: 48px;
  }

  /* Mon Matisseo side blocks: two per row */
  .compte-small-column--dashboard {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
  }

  .nouvelle-creation-wrapper {
    grid-column: 1 / -1;
    padding-top: 0;
  }

  .compte-pagination-wrapper {
    padding-top: 40px;
  }

  /* wizard pop-up has an inline width */
  .checkout-pop-up {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .header-accueil {
    min-height: 0;
  }

  /* fixed place: the title is not centred in the free space of the header,
     so it does not move when the section list below it opens */
  .header-accueil__title {
    flex-grow: 0;
    padding: 48px 0 24px;
  }

  /* section selector as on the mobile mockup: only the current section is shown,
     the arrow opens / closes the list of the other sections (script in _UserGreeting.cshtml) */
  .header-accueil__tabs {
    position: relative;
    flex-direction: column;
    align-items: center;
    padding: 14px 44px 16px;
    overflow: visible;
  }

  .header-accueil__tab,
  .header-accueil__tab:first-child,
  .header-accueil__tab:last-child {
    display: none;
    margin: 0;
    padding: 8px 0;
  }

  .header-accueil__tab.active {
    display: block;
    order: -1;
  }

  .header-accueil__tab.active::after {
    display: none;
  }

  .header-accueil__tabs--open .header-accueil__tab {
    display: block;
  }

  .header-accueil__toggle {
    display: block;
    position: absolute;
    top: 8px;
    right: -8px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
  }

  .header-accueil__toggle::before {
    content: "";
    position: absolute;
    top: 13px;
    left: 15px;
    width: 10px;
    height: 10px;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
  }

  .header-accueil__tabs--open .header-accueil__toggle::before {
    top: 19px;
    transform: rotate(-135deg);
  }

  .compte-wrapper {
    padding-bottom: 48px;
  }

  .compte-wrapper--top {
    padding: 24px 0 0;
  }

  /* side blocks (new creation, points, last orders, address): temporarily hidden on phones,
     the same data is reachable through the section selector of the greeting header */
  .compte-small-column {
    margin-top: 32px;
  }

  .compte-small-column--dashboard {
    display: none;
  }

  .compte-filters-wrapper {
    padding: 20px 0 16px;
  }

  .creation-search {
    max-width: 170px;
  }

  /* creation card: picture on top, then texts, main button and actions
     (!important only where monmatisseo.custom.css uses it) */
  .creations-card {
    flex-direction: column;
    min-height: 0;
    margin: 24px 0;
    padding: 0 0 24px;
  }

  .creations-card__media {
    margin-bottom: 16px;
    background-color: #f2f2f2;
  }

  .creations-card__image-wrapper {
    width: 172px !important;
    height: 172px !important;
    margin: 0 auto;
  }

  .creations-card__image {
    max-width: 128px !important;
    max-height: 128px !important;
  }

  .creations-card__supporting-text,
  .creations-card__supporting-text--lg {
    flex-direction: column;
    gap: 16px;
    padding: 0;
  }

  .creations-card__description,
  .creations-card__data {
    min-width: 0;
  }

  .creations-card__description {
    gap: 12px;
    padding-top: 0;
  }

  /* product details flow on one line instead of one per line */
  .creations-card__wrapper {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 14px;
  }

  .creations-card__price {
    margin: 0;
  }

  .creations-card__btn-main {
    padding: 18px 8px 16px;
  }

  /* actions of a creation: "⋮" button on the picture, as on the mobile mockup.
     It opens the actions list as a menu (button in ArticlesList.cshtml, script in Index.cshtml) */
  .creations-card__menu-btn {
    display: block;
    position: absolute;
    top: 120px;
    right: 12px;
    z-index: 2;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='5' r='2' fill='%231d1d1d'/%3E%3Ccircle cx='12' cy='12' r='2' fill='%231d1d1d'/%3E%3Ccircle cx='12' cy='19' r='2' fill='%231d1d1d'/%3E%3C/svg%3E") center / 24px no-repeat;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
    cursor: pointer;
  }

  .creations-card__actions-list {
    display: none;
    position: absolute;
    top: -20px;
    right: 12px;
    z-index: 5;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    min-width: 240px;
    max-width: calc(100% - 24px);
    padding: 20px 24px;
    box-sizing: border-box;
    border-radius: 3px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1), 0 1px 10px 0 rgba(0, 0, 0, 0.06), 0 4px 5px 0 rgba(0, 0, 0, 0.07);
  }

  .creations-card--menu-open .creations-card__actions-list {
    display: flex;
  }

  .creations-card__actions-list .creations-card__actions {
    margin: 0;
  }

  .creations-card__actions--ul {
    padding-bottom: 0;
  }

  .creations-card__actions--ul::after {
    display: none;
  }

  /* the nested "options du livre" / "plus" menus are listed inside the menu itself */
  .creations-card .popup {
    position: static;
    display: block;
  }

  .creations-card__popup {
    display: block !important;
    opacity: 1 !important;
    position: static;
    width: auto;
    padding: 0 0 0 16px;
    box-shadow: none;
  }

  .creations-card__popup::before {
    display: none;
  }

  .creations-card__popup .creations-card__actions {
    margin-top: 14px;
  }

  /* "plus" is only a label of its nested menu: the label is dropped, its items stay */
  .creations-card__actions--line.popup {
    font-size: 0;
    line-height: 0;
    text-decoration: none;
  }

  .creations-card__actions--line.popup .creations-card__popup {
    padding-left: 0;
  }

  .creations-card__actions--line.popup .creations-card__actions:first-child {
    margin-top: 0;
  }

  /* small confirmation pop-ups (rename, delete, copy ...) */
  .partager__pop-up {
    width: calc(100vw - 32px);
    max-width: 448px;
    max-height: calc(100vh - 32px);
    padding: 40px 24px 24px;
    overflow-y: auto;
  }

  .partager__line {
    width: calc(100% + 48px);
    transform: translateX(-24px);
  }

  .partager__title,
  .partager__subtitle {
    margin-bottom: 20px;
  }

  .partager__le-lien {
    padding: 24px 0 8px;
  }

  .checkout-pop-up {
    margin: 56px auto;
    padding: 40px 16px;
  }
}

/* ==========================================================================
   8. Checkout: tunnel header (steps) and cart
   ========================================================================== */

@media (max-width: 1183px) {
  /* tunnel header: logo above the steps (no burger here) */
  .navbar--ai-center {
    flex-direction: column;
    padding: 16px 16px 8px;
  }

  .navbar--ai-center .navbar__logo-wrapper {
    position: static;
    transform: none;
    margin-bottom: 20px;
  }

  /* six steps at most: the gap shrinks with the screen */
  .progress-bar {
    max-width: 100%;
  }

  .progress-bar__item {
    flex: 0 0 auto;
    margin-left: min(96px, calc((100vw - 224px) / 5));
  }

  .progress-bar__item::before {
    width: min(96px, calc((100vw - 224px) / 5));
  }

  .checkout-cards-wrapper {
    padding: 40px 16px 48px;
    box-sizing: border-box;
  }

  .checkout-footer {
    padding: 24px 16px 64px;
    box-sizing: border-box;
  }

  .checkout__container {
    padding: 40px 16px;
    box-sizing: border-box;
  }

  .checkout-card__image-wrapper {
    width: 112px;
    height: 112px;
    line-height: 112px;
  }

  .checkout-card__image {
    max-width: 80px;
    max-height: 80px;
  }

  .checkout-card__media {
    margin-right: 16px;
  }

  .checkout-card__text-wrapper--mw145 {
    flex: 1;
    min-width: 0;
  }
}

/* cart line as a card: product and finish on top, then price / quantity / sub total */
@media (max-width: 991px) {
  .checkout__wrapper--padding {
    padding: 0 4px;
  }

  .checkout__wrapper--title {
    margin-bottom: 20px;
  }

  /* the column titles row is replaced by a label inside each card */
  .checkout-cards-list > .checkout__wrapper--padding:not(.checkout__wrapper--title) {
    display: none;
  }

  .checkout-card {
    flex-wrap: wrap;
    padding: 16px;
  }

  .checkout-card__block--produit {
    width: 50%;
    padding-right: 16px;
    box-sizing: border-box;
  }

  .checkout-card__text-wrapper--mw145 {
    max-width: none;
    padding-top: 4px;
  }

  .checkout-card__block--finition {
    width: 50%;
    padding-right: 32px;
    box-sizing: border-box;
  }

  .checkout-card__block--finition .checkout-card__text-wrapper {
    padding-top: 4px;
  }

  .checkout-card__block--unite,
  .checkout-card__block--quantite,
  .checkout-card__block--quantite-recap,
  .checkout-card__block--total {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 33.33%;
    min-height: 84px;
    margin-top: 8px;
    padding-top: 30px;
    border-top: 1px solid #f2f2f2;
    box-sizing: border-box;
  }

  .checkout-card__block--unite::before,
  .checkout-card__block--quantite::before,
  .checkout-card__block--quantite-recap::before,
  .checkout-card__block--total::before {
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    font-family: RaisonnePro, sans-serif;
    font-size: 11px;
    line-height: 1.33;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #1d1d1d;
    opacity: 0.6;
  }

  .checkout-card__block--unite::before {
    content: "Prix";
  }

  .checkout-card__block--quantite::before,
  .checkout-card__block--quantite-recap::before {
    content: "Quantit\00e9";
    text-align: center;
  }

  .checkout-card__block--total::before {
    content: "Sous total";
    text-align: right;
  }

  .checkout-card__block--quantite,
  .checkout-card__block--quantite-recap {
    align-items: center;
  }

  .checkout-card__block--total {
    align-items: flex-end;
    text-align: right;
  }

  .checkout-card__remove {
    top: 12px;
    right: 8px;
  }
}

@media (max-width: 767px) {
  /* only the current step keeps its title */
  .progress-bar__title {
    display: none;
  }

  .progress-bar__item--active .progress-bar__title {
    display: block;
    white-space: nowrap;
  }

  .progress-bar__item--active:first-child .progress-bar__title {
    left: 0;
    transform: none;
  }

  .progress-bar__item--active:last-child .progress-bar__title {
    left: auto;
    right: 0;
    transform: none;
  }

  .checkout-cards-wrapper {
    padding: 24px 12px;
  }

  .checkout-card__block--produit {
    width: 100%;
    padding-right: 28px;
  }

  .checkout-card__block--finition {
    width: 100%;
    padding-right: 0;
  }

  .checkout-card__block--finition .checkout-card__text-wrapper {
    padding-top: 8px;
  }

  .checkout-footer {
    flex-direction: column;
    padding: 8px 12px 48px;
  }

  .checkout-footer__wrapper {
    width: 100%;
  }

  .checkout-footer__wrapper + .checkout-footer__wrapper {
    margin-top: 24px;
  }

  .checkout-price__wrapper {
    padding: 0 4px 16px;
  }

  .checkout-price__cell:last-child {
    text-align: right;
  }
}

/* ==========================================================================
   9. Account pages: orders list, order details
   ========================================================================== */

@media (max-width: 1183px) {
  /* order progress (milestones): a vertical timeline, the titles on the right */
  .checkout-bar {
    flex-direction: column;
    margin: 0;
    padding: 8px 0 8px 8px;
  }

  .checkout-bar .checkout-bar__item {
    flex: 0 0 auto;
    margin: 28px 0 0;
  }

  .checkout-bar .checkout-bar__item:first-child {
    margin-top: 0;
  }

  .checkout-bar .checkout-bar__item::before {
    top: auto;
    right: auto;
    bottom: calc(100% + 2px);
    left: 50%;
    width: 2px;
    height: 28px;
    transform: translateX(-50%);
  }

  .checkout-bar .checkout-bar__item--dashed::before {
    width: 0;
    height: 28px;
    border-top: none;
    border-left: 2px dashed #e5e5e5;
  }

  .checkout-bar__title {
    top: 50%;
    left: calc(100% + 16px);
    width: 240px;
    text-align: left;
    transform: translateY(-50%);
  }
}

@media (max-width: 991px) {
  /* orders list: the links of an order go under it instead of its top right corner */
  .commandes-card__actions-list {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
    padding-top: 24px;
    text-align: left;
  }

  .commandes-card__action-wrapper {
    margin-bottom: 0;
  }
}

@media (max-width: 767px) {
  .commandes-cards-wrapper {
    padding-top: 24px;
  }

  .commandes-card {
    padding: 20px 0 32px;
  }

  .commandes-card__flex-wrapper {
    flex-wrap: wrap;
    padding-top: 20px;
  }

  .commandes-card__text-block,
  .commandes-card__text-block:first-child,
  .commandes-card__text-block:last-child {
    width: 50%;
    min-width: 0;
    max-width: 100%;
    margin: 0 0 16px;
    padding-right: 12px;
    box-sizing: border-box;
  }

  .commandes-card__image-cards {
    width: calc(100% + 16px);
    margin: 0 -8px;
  }

  .commandes-subcard {
    width: calc(50% - 16px);
    margin: 8px 8px 0;
  }

  /* delivery / options line: label first, details under it */
  .line-card-wrapper {
    flex-direction: column;
    align-items: stretch;
  }

  .line-card {
    flex-wrap: wrap;
    padding: 20px 0;
  }

  .line-card--recap {
    width: 100%;
  }

  .line-card__block--radio {
    width: 100%;
    margin-bottom: 8px;
  }

  .line-card__block--description {
    width: 60%;
  }

  .line-card__block--status {
    width: 40%;
  }
}

/* ==========================================================================
   10. Account pages (personal info, sponsoring, points) and checkout steps
   ========================================================================== */

@media (max-width: 1183px) {
  /* block title line (title + value) stays one line and keeps its own spacing */
  .compte-wrapper--line {
    flex-direction: row;
    padding-bottom: 16px;
  }

  /* a page wrapper that is also the title line keeps its side gutters */
  .content-wrapper.compte-wrapper--top {
    padding-left: 16px;
    padding-right: 16px;
  }

  .content-wrapper .content-wrapper.compte-wrapper--top {
    padding-left: 0;
    padding-right: 0;
  }

  /* main column + side column (order summary, identifiers): one column */
  .checkout__container--flex {
    flex-direction: column;
  }

  .checkout__large-column,
  .checkout__small-column {
    width: 100%;
  }

  .checkout__small-column {
    margin-top: 40px;
  }

  .checkout-price__wrapper-top {
    max-width: none;
  }
}

@media (max-width: 767px) {
  .checkout__container {
    padding: 24px 12px 40px;
  }

  /* long words (e-mails, addresses without spaces) must not push the page wider */
  .checkout-row__data,
  .checkout-item__label,
  .address-card__text,
  .compte-about__text,
  .personal_info__row {
    overflow-wrap: anywhere;
  }

  /* addresses step: the title of a row above its content */
  .checkout-row {
    flex-wrap: wrap;
    gap: 8px 16px;
    min-height: 0;
  }

  .checkout-row__title {
    width: 100%;
  }

  .checkout-row__data {
    flex: 1;
    width: auto;
    min-width: 0;
  }

  .checkout-row-wrapper {
    gap: 24px;
  }

  .checkout-list {
    gap: 24px;
  }

  /* addresses box */
  .checkout-control__header,
  .checkout-control__footer {
    padding: 16px;
  }

  .checkout-control__filters {
    flex-direction: column;
    align-items: stretch;
    padding: 0 16px;
  }

  .checkout-control__col {
    padding-left: 0;
    border-left: none;
    border-top: 1px solid #e5e5e5;
  }

  .checkout-control__col:first-child {
    border-top: none;
  }

  .checkout-item {
    padding: 0 16px;
  }

  .address-card-list {
    margin-left: -8px;
    margin-right: -8px;
  }

  .address-card {
    width: calc(100% - 16px);
    margin: 8px;
  }

  /* payment: the three cards share one row, the text goes under them */
  .pay-wrapper {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 0;
    margin-bottom: 24px;
  }

  .pay-cards {
    gap: 12px;
    width: 100%;
    margin: 0 0 16px;
  }

  .pay-card,
  .pay-card:first-child {
    flex: 1 1 0;
    width: auto;
    max-width: 134px;
    height: auto;
    aspect-ratio: 134 / 128;
    margin-left: 0;
  }

  .pay-card img {
    max-width: 80%;
    max-height: 80%;
  }

  /* sponsoring */
  .parrainage-wrapper {
    padding-bottom: 40px;
  }

  .copy-field__textarea {
    padding-right: 96px;
  }

  /* points and wallet history */
  .fidelite-table {
    font-size: 13px;
  }

  .fidelite-table__date-cell,
  .fidelite-table__value-cell,
  .fidelite-table__price-cell,
  .fidelite-table__amount-cell {
    width: auto;
    padding: 14px 0 14px 8px;
  }

  .fidelite-table__date-cell {
    padding-left: 0;
  }

  .fidelite-table__price-cell,
  .fidelite-table__amount-cell {
    white-space: nowrap;
  }
}

/* ==========================================================================
   11. Product pages: Album gallery variant
   ========================================================================== */

/* the Album pages size this gallery in their own <style> block (512px wide),
   hence the extra parent class here to win over it */
@media (max-width: 1183px) {
  .select-image-wrapper .select-image--2 {
    width: 100%;
  }

  .select-image-wrapper .select-image--2 .select-image__large-image-wrapper {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .select-image-wrapper .select-image--2 .select-image__small-image-wrapper {
    width: 96px;
    min-width: 96px;
    height: 96px;
  }
}

@media (max-width: 767px) {
  .select-image-wrapper .select-image--2 .select-image__menu {
    margin-top: 0;
  }

  .select-image-wrapper .select-image--2 .select-image__small-image-wrapper {
    width: 72px;
    min-width: 72px;
    height: 72px;
  }
}

/* ==========================================================================
   12. Code activation pages (gift card, 1 Jour 1 Photo card): full page hero
   ========================================================================== */

@media (max-width: 1183px) {
  .header-page--fp {
    padding: 72px 24px 40px;
  }

  .header-page--fp .header-page__text-wrapper {
    flex-shrink: 0;
  }

  .header-page--fp .header-page__image-wrapper-365-new {
    flex: 1;
    min-width: 0;
    transform: none;
  }
}

@media (max-width: 767px) {
  /* text and code field first, the picture under them */
  .header-page--fp {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    height: auto;
    padding: 64px 16px 32px;
  }

  .header-page--fp .header-page__text-wrapper {
    width: 100%;
  }

  .header-page--fp .header-page__image-wrapper-365-new {
    flex: 0 0 auto;
    width: 80%;
    max-width: 320px;
    margin: 32px auto 0;
  }
}

/* ==========================================================================
   13. Checkout: delivery options and summary step
   ========================================================================== */

@media (max-width: 767px) {
  /* a delivery option: its name on the first line, estimate and tracking under it */
  .line-card__label {
    flex-wrap: wrap;
  }

  /* wallet: the "use my wallet" checkbox goes under the amount */
  .cagnotte-wrapper {
    margin-bottom: 16px;
  }

  .cagnotte {
    display: block;
  }

  .cagnotte__group {
    position: static;
    margin-top: 12px;
  }
}

/* ==========================================================================
   14. Gift card page: card designer and banner
   ========================================================================== */

@media (max-width: 1183px) {
  /* the cover has an inline width (341px): the inside of the card takes what is left */
  .postcard-wrapper {
    gap: 20px;
  }

  .postcard__cover {
    flex: 0 0 auto;
    max-width: 100%;
  }

  .postcard__data {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }

  .cadeau-banner {
    box-sizing: border-box;
  }

  .cadeau-banner__text-block {
    width: auto;
    max-width: 405px;
  }
}

@media (max-width: 991px) {
  /* cover, then the two inner sides of the card under each other */
  .postcard-wrapper {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding-bottom: 32px;
    margin-bottom: 32px;
  }

  .postcard__data {
    flex: 0 0 auto;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 480px;
    height: auto;
    padding: 48px 16px 24px;
  }

  .postcard__data::before,
  .postcard__data::after {
    display: none;
  }

  .postcard__data-text-block {
    width: 100%;
    height: auto;
  }

  .postcard__data-text {
    height: 240px;
  }

  .postcard__data-text-block--flex {
    padding-top: 24px;
    border-top: 1px solid #e5e5e5;
  }
}

@media (max-width: 767px) {
  .cadeau__title {
    margin-bottom: 24px;
  }

  .cadeau-form-wrapper {
    padding-left: 0;
  }

  .cadeau-banner-wrapper {
    margin-bottom: 40px;
  }

  .cadeau-banner {
    height: auto;
    padding: 32px 16px;
  }
}

/* ==========================================================================
   15. 1 Jour 1 Photo landing pages (Promo/OneDayOnePhoto*.cshtml)
   The desktop page is scroll animated (master-365-motion.css / .js, class
   "motion-365" on the page wrapper). Below 1184px the animation is switched
   off: every section gets a plain static layout. The script still runs and
   writes inline opacity values, hence the "!important" on opacity only.
   ========================================================================== */

@media (max-width: 1183px) {
  /* --- everything stays visible --- */
  .motion-365 .booktitle-wrapper,
  .motion-365 .info__card--small,
  .motion-365 .mobile-365__title,
  .motion-365 .mobile-365__text,
  .motion-365 .mobile-365__bg-image-wrapper,
  .motion-365 .mobile-365__links-wrapper,
  .motion-365 .book-offert__title,
  .motion-365 .book-offert__text,
  .motion-365 .banner-price-365,
  .motion-365 .banner-price-365__title,
  .motion-365 .banner-price-365__economisez,
  .motion-365 .banner-price-365__btn-wrapper {
    opacity: 1 !important;
  }

  /* --- hero: text on the left, book on the right --- */
  .header-page--365 {
    height: auto;
    margin-bottom: 64px;
    padding: 88px 24px 48px;
  }

  .header-page--365 .header-page__text-wrapper {
    width: 52%;
  }

  .header-page__image-wrapper-365 {
    top: 96px;
    right: 24px;
    width: 40%;
  }

  /* --- "order one year ahead" title --- */
  .motion-365 .booktitle-wrapper {
    height: auto;
    margin-bottom: 32px;
    padding: 0 24px;
  }

  .motion-365 .position-fixed {
    position: static;
    transform: none;
    pointer-events: auto;
  }

  /* --- book pictures carousel --- */
  .motion-365 .book-content {
    min-height: 0;
  }

  .motion-365 .book-carousel-wrapper {
    position: static;
    min-height: 0;
  }

  .motion-365 .book-carousel {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
  }

  .book-carousel .slick-dots {
    top: auto;
    bottom: 12px;
  }

  /* --- four advantages --- */
  .motion-365 .content-wrapper--vh2 {
    height: auto;
    padding: 56px 24px;
  }

  .motion-365 .info__card-list {
    position: static;
    max-width: none;
    margin: -16px;
    padding-bottom: 0;
  }

  .motion-365 .info__card--small {
    width: calc(50% - 32px) !important; /* inline width in the view */
    margin: 16px;
  }

  /* --- "one day one photo" banner --- */
  .motion-365 .banner-365__parallax-wrapper {
    height: auto;
    margin-bottom: 0;
  }

  .motion-365 .banner-365 {
    position: relative;
    top: auto;
    transform: none;
  }

  .banner-365__text-wrapper {
    max-width: 52%;
    padding: 72px 0 72px 24px;
  }

  .banner-365__bg-image-wrapper {
    width: 44%;
  }

  .banner-365__bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
  }

  /* --- "your photos leave the phone" --- */
  .mobile-365 {
    padding: 64px 0 0;
  }

  .motion-365 .mobile-365__wrapper-parallax {
    height: auto;
  }

  .motion-365 .mobile-365__wrapper-parallax--inner {
    position: static;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 24px 48px;
  }

  .motion-365 .mobile-365__text-wrapper {
    flex: 1;
    width: auto !important; /* inline width in the view */
    padding: 0;
  }

  .motion-365 .mobile-365__bg-image-wrapper {
    position: static;
    flex: 0 0 30%;
  }

  .motion-365 .mobile-365__image-list {
    position: static;
  }

  /* --- photo banner --- */
  .motion-365 .banner-image {
    height: auto;
  }

  /* --- box --- */
  .book-offert {
    padding: 64px 24px 48px;
  }

  .book-offert__text-wrapper {
    max-width: 700px;
    padding-left: 0;
  }

  .book-offert__bg-image-wrapper {
    position: static;
    margin-top: 32px;
    text-align: center;
    transform: none;
  }

  /* --- price banner --- */
  .banner-price-365 {
    padding: 72px 16px;
  }

  .banner-price-365__text-wrapper {
    width: auto;
    max-width: 480px;
  }
}

@media (max-width: 767px) {
  /* hero: the book above the text */
  .header-page--365 {
    margin-bottom: 40px;
    padding: 64px 16px 32px;
  }

  .header-page--365 .header-page__text-wrapper {
    width: 100%;
  }

  .header-page__image-wrapper-365 {
    position: static;
    width: 70%;
    max-width: 280px;
    margin: 0 auto 24px;
  }

  .motion-365 .booktitle-wrapper {
    padding: 0 16px;
  }

  .motion-365 .content-wrapper--vh2 {
    padding: 40px 16px;
  }

  /* banner: text first, picture under it */
  .banner-365__text-wrapper {
    max-width: none;
    padding: 40px 16px 24px;
  }

  .banner-365__bg-image-wrapper {
    position: static;
    width: 100%;
    height: 240px;
  }

  .mobile-365 {
    padding-top: 40px;
  }

  .motion-365 .mobile-365__wrapper-parallax--inner {
    flex-direction: column;
    padding: 0 16px 32px;
  }

  .motion-365 .mobile-365__text-wrapper {
    flex: 0 0 auto;
    width: 100% !important;
  }

  .motion-365 .mobile-365__bg-image-wrapper {
    flex: 0 0 auto;
    width: 60%;
    max-width: 240px;
  }

  .book-offert {
    padding: 40px 16px 32px;
  }

  .banner-price-365 {
    padding: 48px 16px;
  }
}

@media (max-width: 550px) {
  .motion-365 .info__card--small {
    width: calc(100% - 32px) !important;
  }
}

/* "offrir" pop-up of the landing pages */
@media (max-width: 1183px) {
  .pop-up-365__image-wrapper-small {
    width: auto;
    max-width: 736px;
  }

  .pop-up-365__text-wrapper,
  .pop-up-365__comment {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 767px) {
  .checkout-pop-up--mobile-365 {
    padding: 56px 0 0;
  }

  .pop-up-365__text-wrapper {
    margin-bottom: 32px;
  }
}

/* ==========================================================================
   16. Project lightbox ("Voir le livre", Shared/_Lightbox.cshtml)
   ========================================================================== */

@media (max-width: 1183px) {
  /* the lightbox is fixed to the screen: a minimum height would hide its
     bottom controls on short screens, with no way to scroll to them */
  .lightbox-wrapper {
    min-height: 0;
    height: 100%;
    padding: 0 16px;
  }

  .lightbox-header {
    flex-wrap: wrap;
    row-gap: 8px;
    top: 12px;
  }

  .lightbox-header__item,
  .lightbox-header__btn {
    margin: 0 10px;
  }

  /* bigger targets for fingers */
  .lightbox-navigation__btn {
    width: 40px;
    height: 40px;
  }

  .lightbox-header__close {
    width: 20px;
    height: 20px;
    padding: 8px;
    background-origin: content-box;
  }
}

/* Upright screens: the desktop lightbox sizes the open book from the screen
   height, which makes a spread wider than a narrow screen. Here the spread
   takes the available width and the pages scale down together. */
@media (max-width: 1183px) and (orientation: portrait) {
  .lightbox-album {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: none;
  }

  .lightbox-album__list,
  .lightbox-album__item {
    height: auto;
  }

  .lightbox-album__item--active {
    align-items: stretch;
  }

  /* each picture keeps its own proportions and shrinks with its neighbours
     (a cover is one picture, or back + spine + front);
     "!important" because empty pages get an inline size from the script */
  .lightbox-album__image {
    flex: 0 1 auto;
    min-width: 0;
    max-width: none;
    height: auto !important;
  }

  /* inside the book the two facing pages always share the width equally,
     whatever the size of their preview files or of an empty page */
  .lightbox-album__item:not(.lightbox-album__item--cover) .lightbox-album__image--left,
  .lightbox-album__item:not(.lightbox-album__item--cover) .lightbox-album__image--right {
    flex: 1 1 0;
  }
}

@media (max-width: 767px) {
  /* bottom of the lightbox: name and page numbers above the page buttons, no logo */
  .lightbox-info {
    left: 16px;
    right: 16px;
    bottom: 76px;
    text-align: center;
  }

  .lightbox-navigation {
    bottom: 20px;
  }

  .lightbox-logo {
    display: none;
  }

  .lightbox-header__btn {
    padding: 10px 16px;
  }
}

/* sideways phones: leave room for the header and the bottom controls */
@media (max-width: 1183px) and (orientation: landscape) and (max-height: 600px) {
  .lightbox-album {
    height: calc(100vh - 150px);
  }
}

/* ==========================================================================
   17. /album promo page (Products/Promo-album.cshtml, layout _LayoutPromo.cshtml)
   The page has its own stylesheet (Content/bundles/regular/promo/album/css),
   a newer copy of main.css without any small screen rule: the generic parts
   are covered by the sections above, its own blocks by this one.
   ========================================================================== */

@media (max-width: 1183px) {
  /* text + picture blocks */
  .t-block {
    gap: 32px;
    padding: 56px 24px;
  }

  /* end banner */
  .t-banner {
    padding: 64px 24px 24px;
  }
}

@media (max-width: 767px) {
  /* sticky top bar (appears once the hero is scrolled away) */
  .topbar-container {
    align-items: center;
    gap: 12px;
  }

  .topbar-data {
    max-width: none;
    min-width: 0;
  }

  .topbar-data__title {
    display: -webkit-box;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .topbar-price {
    flex-shrink: 0;
    gap: 12px;
  }

  .topbar-btn {
    padding: 13px 14px 14px;
    font-size: 12px;
    letter-spacing: 1.5px;
    white-space: nowrap;
  }

  /* text + picture blocks: picture first, text under it */
  .t-block,
  .t-block:nth-child(even) {
    flex-direction: column;
    gap: 24px;
    padding: 40px 16px;
  }

  .t-block__image,
  .t-block__data {
    width: 100%;
    max-width: 544px;
  }

  /* draggable picture strip: pictures sized from the screen instead of fixed 814 / 386px */
  .format-wrapper-2 {
    padding: 24px 0;
  }

  .format-wrapper-2 .horizontal-images__image-wrapper {
    width: 82vw;
    min-width: 82vw;
  }

  .format-wrapper-2 .horizontal-images__image-wrapper--sm {
    width: 39vw;
    min-width: 39vw;
  }

  .format-wrapper-2 .horizontal-images__item {
    margin: 0 8px;
  }

  .card-swiper {
    gap: 32px;
    padding: 32px 0 48px;
  }

  .t-banner {
    height: auto;
    min-height: 280px;
    padding: 48px 16px;
  }

  .t-banner__image-wrapper,
  .t-banner__image {
    height: 100%;
  }
}