@import "variables.css";

html, body {
  margin: 0;
  padding: 0;
}

p {
  margin: 0;
}

.container, .page-container {
  max-width: 910px;
  padding-left: 2em;
}

.region {
  position: relative;
  margin-bottom: 0.75rem;
}

.region:before {
  display: block;
  content: "";
  width: 100%;
}

.region .experience-component {
  position: absolute;
  top: 0;
  bottom: 0;
  /*replicating the gutters*/
  left: 0.5rem;
  right: 0.5rem;
}

/* padding-top in percentages refers to parent width
   this allows us to specify an aspect-ratio         */
.region_landscape-large:before {
  padding-top: calc(400 / 1024 * 100%);
}

.region_square:before {
  padding-top: calc(1 / 1 * 100%);
}

.region_landscape-small:before {
  padding-top: calc(1 / 2 * 100%);
}

.region_portrait-small:before {
  padding-top: calc(2 / 1 * 100%);
}

div.sf-interactions-proxyHoverContainer a {
  overflow: visible;
}

.page-designer-reference .mx-n2 .col-12 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.page-designer-reference .mx-n2 .experience-component {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

[class^="experience-component experience-layouts"] section:first-of-type, [class^="experience-component experience-assets-"] > section:first-of-type {
  max-width: 1340px;
  margin: var(--component-margins-desktop) 5rem !important;
}

@media screen and (max-width: 1024px) { 
  [class^="experience-component experience-layouts"] section:first-of-type, [class^="experience-component experience-assets-"] > section:first-of-type {
    margin: var(--component-margins-mobile) 2rem !important;
    width: auto;
  }
}

/* General Styles for Layouts with Assets */
[class^="experience-component experience-layouts"] [class^="experience-component experience-assets-"] section {
	padding: 0;
	margin: 0 !important;
	max-width: none;
}

/* Full-width PageDesigner Components on Homepage */
.page-designer-reference>.mx-n2[id^="homepage"] .experience-component.experience-layouts-homepageswiper,
.page-designer-reference>.mx-n2[id^="homepage"] .experience-component.experience-layouts-homepagenewswiperlayout,
.page-designer-reference>.mx-n2[id^="homepage"] .experience-component.experience-layouts-homepageswiper section,
.page-designer-reference>.mx-n2[id^="homepage"] .experience-component.experience-layouts-homepagenewswiperlayout section {
	max-width: none;
	margin: 0 !important;
	padding: 0;
}

/* Specific use case for bloc look */
@media screen and (max-width: 1023px) {
  .page-designer-reference .mx-n2 .experience-component.experience-assets-bloclook section {
    margin: var(--component-margins-mobile) 0 !important;
  }
}

/* Specific use case for macarrons */
.page-designer-reference .mx-n2 .experience-component.experience-assets-blocmacarron section {
  margin: 2.3rem auto var(--component-margins-mobile) !important;
  width: 100%;
}

@media screen and (min-width: 1025px) {
  .page-designer-reference .mx-n2 .experience-component.experience-assets-blocmacarron section {
    margin: 2.4rem auto var(--component-margins-desktop) !important;
  }
}

/* Specific use case for anchors */
.page-designer-reference .mx-n2 .experience-component.experience-layouts-anchors section {
  margin: var(--component-margins-mobile) auto !important;
}

@media screen and (min-width: 1025px) {
  .page-designer-reference .mx-n2 .experience-component.experience-layouts-anchors section {
    margin: var(--component-margins-desktop) auto !important;
    width: fit-content;
  }
}

@media screen and (max-width: 1023px) {
  /* Specific layout for block_visuel_droit and block_visuel_gauche component */
  .experience-component.experience-assets-blockvisueldroite section,
  .experience-component.experience-assets-blockvisuelgauche section,
  .experience-component.experience-layouts-blockitems section {
    margin: var(--component-margins-mobile) 0 !important;
  }
  .experience-component.experience-layouts-blockitems section section {
    margin: 0!important;
  }

  /* Specific layout for Anchors component */
  .experience-layouts-anchors {
    padding: 0 2.8rem;
  }

  /* Specific use case for block full image and text */
  .page-designer-reference .mx-n2 .experience-component.experience-assets-LPImgFullAndText section {
    margin: 2.3rem 0 !important;
    width: 100%;
  }
}