:root {
  --green-100:rgba(177, 212, 212, 1);
  --fontfamilyPfamily: ZillaSlab_regular;
  --fontfamilySfamily:HostGrotesk_regular;
}

@font-face {
  font-family: HostGrotesk_regular;
  src: url("../../../../fonts/host_grotesk/font-files/HostGrotesk-Regular.ttf");
}
@font-face {
  font-family: ZillaSlab_regular;
  src: url("../../../../fonts/zilla_slab/font-files/ZillaSlab-Regular.ttf");
}
:root {
  --green-100:rgba(177, 212, 212, 1);
  --fontfamilyPfamily: ZillaSlab_regular;
  --fontfamilySfamily:HostGrotesk_regular;
}

@font-face {
  font-family: HostGrotesk_regular;
  src: url("../../../../fonts/host_grotesk/font-files/HostGrotesk-Regular.ttf");
}
@font-face {
  font-family: ZillaSlab_regular;
  src: url("../../../../fonts/zilla_slab/font-files/ZillaSlab-Regular.ttf");
}
:root {
  --green-100:rgba(177, 212, 212, 1);
  --fontfamilyPfamily: ZillaSlab_regular;
  --fontfamilySfamily:HostGrotesk_regular;
}

@font-face {
  font-family: HostGrotesk_regular;
  src: url("../../../../fonts/host_grotesk/font-files/HostGrotesk-Regular.ttf");
}
@font-face {
  font-family: ZillaSlab_regular;
  src: url("../../../../fonts/zilla_slab/font-files/ZillaSlab-Regular.ttf");
}
:root {
  --green-100:rgba(177, 212, 212, 1);
  --fontfamilyPfamily: ZillaSlab_regular;
  --fontfamilySfamily:HostGrotesk_regular;
}

@font-face {
  font-family: HostGrotesk_regular;
  src: url("../../../../fonts/host_grotesk/font-files/HostGrotesk-Regular.ttf");
}
@font-face {
  font-family: ZillaSlab_regular;
  src: url("../../../../fonts/zilla_slab/font-files/ZillaSlab-Regular.ttf");
}
:root {
  --green-100:rgba(177, 212, 212, 1);
  --fontfamilyPfamily: ZillaSlab_regular;
  --fontfamilySfamily:HostGrotesk_regular;
}

@font-face {
  font-family: HostGrotesk_regular;
  src: url("../../../../fonts/host_grotesk/font-files/HostGrotesk-Regular.ttf");
}
@font-face {
  font-family: ZillaSlab_regular;
  src: url("../../../../fonts/zilla_slab/font-files/ZillaSlab-Regular.ttf");
}
:root {
  --green-100:rgba(177, 212, 212, 1);
  --fontfamilyPfamily: ZillaSlab_regular;
  --fontfamilySfamily:HostGrotesk_regular;
}

@font-face {
  font-family: HostGrotesk_regular;
  src: url("../../../../fonts/host_grotesk/font-files/HostGrotesk-Regular.ttf");
}
@font-face {
  font-family: ZillaSlab_regular;
  src: url("../../../../fonts/zilla_slab/font-files/ZillaSlab-Regular.ttf");
}
:root {
  --green-100:rgba(177, 212, 212, 1);
  --fontfamilyPfamily: ZillaSlab_regular;
  --fontfamilySfamily:HostGrotesk_regular;
}

@font-face {
  font-family: HostGrotesk_regular;
  src: url("../../../../fonts/host_grotesk/font-files/HostGrotesk-Regular.ttf");
}
@font-face {
  font-family: ZillaSlab_regular;
  src: url("../../../../fonts/zilla_slab/font-files/ZillaSlab-Regular.ttf");
}
#kagoo-app {
  overflow: unset !important;
}

.section-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.principal {
  display: flex;
  gap: 20px;
  height: 544px;
}

.image-article {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 648px;
  height: 544px;
}

.image-article img {
  width: 648px;
  height: 544px;
}

.content-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  width: 650px;
}

.bloc-text {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.bloc-text h1 {
  font-family: "HostGrotesk_regular";
  font-size: 44px;
  line-height: 100%;
  font-weight: 400 !important;
  letter-spacing: 0;
  vertical-align: middle;
  margin: 0px !important;
}

.bloc-text p {
  font-family: "HostGrotesk_regular";
  font-size: 18px;
  line-height: 143%;
  font-weight: 400 !important;
  letter-spacing: 0;
  vertical-align: middle;
  margin: 0px !important;
}

.bloc-text span {
  font-family: "HostGrotesk_regular";
  font-size: 14px;
  line-height: 100%;
  font-weight: 400 !important;
  letter-spacing: 0;
  vertical-align: middle;
  margin: 0px !important;
  color: #A2A3A8;
}

.btn-tags {
  /*
      $colors attendu :
      (
          default: #007bff,
          hover: #0056b3,
          focus: #80bdff,
          active: #c0c0c0
      );
  */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 12px !important;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 18.5rem;
  overflow: hidden;
  cursor: pointer !important;
  white-space: nowrap;
  padding: 8px 12px !important;
  height: 2rem;
  font-family: "HostGrotesk_regular";
  font-size: 14px;
  line-height: 100%;
  font-weight: 500 !important;
  letter-spacing: 0;
  vertical-align: middle;
  margin: 0px !important;
  border-radius: 999px !important;
  background-color: #fff !important;
  color: #EDEDF2 !important;
  font-family: "HostGrotesk_regular";
  font-size: 12px;
  line-height: 100%;
  font-weight: 500 !important;
  letter-spacing: 0;
  vertical-align: middle;
  margin: 0px !important;
  color: rgb(46, 45, 56) !important;
  border: 1px solid #EDEDF2;
}
.btn-tags:hover {
  background-color: #EDEDF2 !important;
}
.btn-tags:focus, .btn-tags:focus-visible, .btn-tags:focus-within {
  background-color: #EDEDF2 !important;
}
.btn-tags:active {
  background-color: #EDEDF2 !important;
  color: #fff !important;
}

.tag {
  display: flex;
  gap: 8px;
}

.sub-principal {
  display: flex;
  gap: 12px;
}

.sub-principal > * {
  color: #5E5E5E !important;
  font-family: "HostGrotesk_regular";
  font-size: 14px;
  line-height: 120%;
  font-weight: 400 !important;
  letter-spacing: 0;
  vertical-align: middle;
  margin: 0px !important;
  text-decoration: none;
}

.section-comment-action {
  margin-top: 100px;
}

.comment {
  background-color: #003A36;
}

.body-comment {
  display: flex;
  padding: 60px 0px 32px 0px;
  display: flex;
  gap: 56px;
}

.form-comment {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 650px;
}

.title-comment {
  font-family: "HostGrotesk_regular";
  font-size: 32px;
  line-height: 100%;
  font-weight: 400 !important;
  letter-spacing: 0;
  vertical-align: middle;
  margin: 0px !important;
  color: #FFFFFF;
}

.para-comment {
  font-family: "HostGrotesk_regular";
  font-size: 16px;
  line-height: 133%;
  font-weight: 400 !important;
  letter-spacing: 0;
  vertical-align: middle;
  margin: 0px !important;
  color: #FFFFFF;
}

.formulaire-comment {
  background-color: #FFFFFF;
  border-radius: 12px;
  padding: 36px 24px 24px 24px;
  gap: 32px;
  display: flex;
  flex-direction: column;
}

.part {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bloc1-form {
  display: flex;
  gap: 32px;
}

.part textarea {
  height: 158px;
}

.part label {
  color: #027373;
  font-family: "HostGrotesk_regular";
  font-size: 16px;
  line-height: 133%;
  font-weight: 400 !important;
  letter-spacing: 0;
  vertical-align: middle;
  margin: 0px !important;
}

.star {
  color: #F93F2E;
}

input, textarea {
  font-weight: 400;
  font-size: 14px;
  border-radius: 0.3125rem;
  padding: 0.75rem;
  height: 2.25rem;
  border: 1px solid #DEDEE2;
  color: #5E5E5E;
  background-color: #FBFBFD;
  line-height: 0.8;
  width: 100%;
  caret-color: #027373;
}
input:not(:-moz-placeholder):hover, textarea:not(:-moz-placeholder):hover {
  border: 1px solid #027373;
  box-shadow: none !important;
}
input:hover, input:not(:placeholder-shown):hover, textarea:hover, textarea:not(:placeholder-shown):hover {
  border: 1px solid #027373;
  box-shadow: none !important;
}
input:not(:-moz-placeholder):hover, textarea:not(:-moz-placeholder):hover {
  border: 1px solid #027373;
  outline: none;
  box-shadow: none;
  box-shadow: none !important;
}
input:focus-visible, input:not(:placeholder-shown):hover, textarea:focus-visible, textarea:not(:placeholder-shown):hover {
  border: 1px solid #027373;
  outline: none;
  box-shadow: none;
  box-shadow: none !important;
}
input ::-moz-placeholder, textarea ::-moz-placeholder {
  color: #D0D0D4 !important;
}
input ::placeholder, textarea ::placeholder {
  color: #D0D0D4 !important;
}
input:not(:-moz-placeholder):focus, input:not(:-moz-placeholder):focus-visible, input:not(:-moz-placeholder):focus-within, input:not(:-moz-placeholder), textarea:not(:-moz-placeholder):focus, textarea:not(:-moz-placeholder):focus-visible, textarea:not(:-moz-placeholder):focus-within, textarea:not(:-moz-placeholder) {
  border: 1px solid #DEDEE2;
  box-shadow: none !important;
}
input:not(:placeholder-shown):focus, input:not(:placeholder-shown):focus-visible, input:not(:placeholder-shown):focus-within, input:not(:placeholder-shown), textarea:not(:placeholder-shown):focus, textarea:not(:placeholder-shown):focus-visible, textarea:not(:placeholder-shown):focus-within, textarea:not(:placeholder-shown) {
  border: 1px solid #DEDEE2;
  box-shadow: none !important;
}
input.error, input .has-error, textarea.error, textarea .has-error {
  border: 1px solid #f25f29 !important;
  background-color: #FFF4F4;
  box-shadow: none;
}
input.disabled, textarea.disabled {
  background-color: #F4F4F7;
  box-shadow: none;
}

.btn-orange-500 {
  /*  
      example de valeur de color lors de son utilisation :
      $colors: (
          default: #007bff,
          hover: #0056b3,
          focus: #80bdff,
          disabled: #c0c0c0
      );
  */
  gap: 8px;
  display: flex;
  align-items: center;
  padding: 12px 16px;
  min-width: -moz-fit-content;
  min-width: fit-content;
  height: 2.25rem;
  width: -moz-fit-content;
  width: fit-content;
  font-family: "HostGrotesk_regular";
  font-size: 14px;
  line-height: 100%;
  font-weight: 500 !important;
  letter-spacing: 0;
  vertical-align: middle;
  margin: 0px !important;
  border-radius: 5px;
  text-decoration: none;
  background-color: #f25f29;
  border: none;
  color: #FFFFFF;
  text-decoration: none;
}
.btn-orange-500:hover {
  color: #FFFFFF;
  background-color: #F57F54;
  text-decoration: none;
}
.btn-orange-500:focus, .btn-orange-500:focus-within {
  background-color: #DC5625;
  color: #FFFFFF;
  box-shadow: none !important;
  outline: none;
}
.btn-orange-500:disabled, .btn-orange-500:disabled:hover {
  background-color: #F4F4F7;
  border: 1.5px solid #F4F4F7;
  color: #C9C9CE !important;
  cursor: not-allowed;
}

.btn-orange-500-large span {
  width: 20px;
  height: 20px;
}

.btn-orange-500-large {
  /*  
      example de valeur de color lors de son utilisation :
      $colors: (
          default: #007bff,
          hover: #0056b3,
          focus: #80bdff,
          disabled: #c0c0c0
      );
  */
  gap: 8px;
  display: flex;
  align-items: center;
  padding: 20px 24px;
  height: 52px;
  width: -moz-fit-content;
  width: fit-content;
  font-family: "HostGrotesk_regular";
  font-size: 16px;
  line-height: 100%;
  font-weight: 500 !important;
  letter-spacing: 0;
  vertical-align: middle;
  margin: 0px !important;
  border-radius: 8px;
  text-decoration: none;
  background-color: #f25f29;
  border: none;
  color: #FFFFFF;
}
.btn-orange-500-large:hover {
  color: #FFFFFF;
  background-color: #F57F54;
  text-decoration: none;
}
.btn-orange-500-large:focus, .btn-orange-500-large:focus-within {
  background-color: #DC5625;
  color: #FFFFFF;
  box-shadow: none !important;
  outline: none;
}
.btn-orange-500-large:disabled, .btn-orange-500-large:disabled:hover {
  background-color: #F4F4F7;
  border: 1.5px solid #F4F4F7;
  color: #C9C9CE !important;
  cursor: not-allowed;
}

.btn-sub-comment {
  cursor: pointer;
  justify-content: center;
  font-family: "HostGrotesk_regular";
  font-size: 18px;
  line-height: 143%;
  font-weight: 500 !important;
  letter-spacing: 0;
  vertical-align: middle;
  margin: 0px !important;
  width: 100%;
}

.image-comment {
  width: 619px;
  position: relative;
  top: 140px;
}

.body-image-comment {
  position: relative;
  height: 418px;
}

.body-image-comment .one {
  position: relative;
  height: 549px;
  width: 606.66px;
}

.svg-1, .svg-2, .svg-3 {
  position: absolute;
}

.svg-2 {
  left: 315.07px;
  top: -12.25px;
}

.svg-1 {
  top: 11.87px;
  left: 11.96px;
}

.svg-3 {
  top: 196.75px;
  left: 106.58px;
}

.body-try {
  background-color: rgba(253, 199, 38, 0.24);
  border-radius: 8px 8px 40px 40px;
  padding: 89px 112px 48px 112px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.btn-try {
  display: flex;
  align-items: end;
}

.btn-try a {
  font-family: "HostGrotesk_regular";
  font-size: 18px;
  line-height: 143%;
  font-weight: 500 !important;
  letter-spacing: 0;
  vertical-align: middle;
  margin: 0px !important;
}

.content-text {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.title-try {
  font-family: "ZillaSlab_regular";
  font-size: 44px;
  line-height: 110%;
  font-weight: 600 !important;
  letter-spacing: 0;
  vertical-align: middle;
  margin: 0px !important;
  color: #026969;
}

.para-try {
  font-family: "HostGrotesk_regular";
  font-size: 16px;
  line-height: 133%;
  font-weight: 400 !important;
  letter-spacing: 0;
  vertical-align: middle;
  margin: 0px !important;
  color: #15171E;
}

.section-more-article {
  margin-top: 132px;
  margin-bottom: 100px;
}

.title-more {
  font-family: "HostGrotesk_regular";
  font-size: 32px;
  line-height: 123%;
  font-weight: 500 !important;
  letter-spacing: 0;
  vertical-align: middle;
  margin: 0px !important;
  color: rgb(46, 45, 56);
}

.global-article-more {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.body-article-more {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.row-article-more {
  display: grid;
  grid-template-columns: 33% 33% 33%;
  grid-column-gap: 20px;
}

.card-article-more {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.img-article-more {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: auto;
  height: 199.62px;
  min-height: 93.28px;
  border-radius: 16px 16px 5px 5px;
}

.see-more-animation {
  gap: 8px;
  display: flex;
  align-items: center;
  padding: 12px 16px;
  min-width: -moz-fit-content;
  min-width: fit-content;
  height: 2.25rem;
  width: -moz-fit-content;
  width: fit-content;
  font-family: "HostGrotesk_regular";
  font-size: 14px;
  line-height: 100%;
  font-weight: 500 !important;
  letter-spacing: 0;
  vertical-align: middle;
  margin: 0px !important;
  border-radius: 20px;
  background-color: #fff;
  height: 40px;
  border: 1px solid #358F8F;
  transition: color 200ms ease-in-out;
  color: #027373;
  text-decoration: none !important;
  text-align: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
  font-family: "HostGrotesk_regular";
  font-size: 14px;
  line-height: 100%;
  font-weight: 500 !important;
  letter-spacing: 0;
  vertical-align: middle;
  margin: 0px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.see-more-animation span {
  display: none;
  visibility: hidden;
  width: 0;
  margin-left: 0;
  transition: opacity 200ms ease-in-out, visibility 0s linear 200ms, width 200ms ease-in-out;
}
.see-more-animation:hover {
  color: #FFFFFF;
  background-color: #358F8F;
  text-decoration: none !important;
}
.see-more-animation:hover span {
  display: block;
  visibility: visible;
  width: auto;
  transition-delay: 0s;
}

.see-more-animation span {
  width: 16px;
  height: 16px;
}

.card-article-more h6 {
  font-family: "HostGrotesk_regular";
  font-size: 20px;
  line-height: 130%;
  font-weight: 500 !important;
  letter-spacing: 0;
  vertical-align: middle;
  margin: 0px !important;
  color: #000000;
  height: 60px;
}

.card-article-more span {
  font-family: "HostGrotesk_regular";
  font-size: 14px;
  line-height: 100%;
  font-weight: 400 !important;
  letter-spacing: 0;
  vertical-align: middle;
  margin: 0px !important;
  color: #A2A3A8;
}

.card-article-more p {
  font-family: "HostGrotesk_regular";
  font-size: 16px;
  line-height: 133%;
  font-weight: 300 !important;
  letter-spacing: 0;
  vertical-align: middle;
  margin: 0px !important;
  color: #5E5E5E;
  height: 60px;
}

.section-detail-article {
  margin-top: 110px;
  display: grid;
  grid-template-columns: 64.87% 32.39%;
  grid-column-gap: 2.74%;
  align-items: start;
}

.detail-article {
  display: flex;
  flex-direction: column;
  gap: 60px;
  height: -moz-fit-content;
  height: fit-content;
}

.other-article {
  display: flex;
  flex-direction: column;
  height: -moz-fit-content;
  height: fit-content;
  position: sticky;
  top: 130px;
  gap: 24px;
}

.resume h2 {
  font-family: "HostGrotesk_regular";
  font-size: 16px;
  line-height: 133%;
  font-weight: 400 !important;
  letter-spacing: 0;
  vertical-align: middle;
  margin: 0px !important;
}

.sommaire {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 8px 0px;
}

.sommaire .title {
  font-family: "HostGrotesk_regular";
  font-size: 20px;
  line-height: 130%;
  font-weight: 600 !important;
  letter-spacing: 0;
  vertical-align: middle;
  margin: 0px !important;
  color: #003A36;
}

.links-sommaire {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-left: 39.5px;
}

.links-sommaire a {
  font-family: "HostGrotesk_regular";
  font-size: 16px;
  line-height: 133%;
  font-weight: 300 !important;
  letter-spacing: 0;
  vertical-align: middle;
  margin: 0px !important;
  color: #027373;
  display: flex;
  text-decoration: none;
}

.other-article .title {
  font-family: "HostGrotesk_regular";
  font-size: 28px;
  line-height: 123%;
  font-weight: 500 !important;
  letter-spacing: 0;
  vertical-align: middle;
  margin: 0px !important;
  color: #015252;
  width: 272px;
  height: 50px;
  border-bottom: 2px solid #f25f29;
}

.body-article-recent {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.article-recent {
  display: flex;
  gap: 2.8%;
  flex-wrap: wrap;
  text-decoration: none;
  color: #000000;
}

.article-button {
  position: absolute;
  transform: translateX(150px);
  opacity: 0;
  transition: none;
  will-change: transform, opacity;
  left: 0%;
  bottom: -13%;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: #f25f29;
}

.image-article-recent {
  position: relative;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 48.59%;
  height: 174.61px;
  border-radius: 5px;
  overflow: hidden;
}

.image-article-recent:hover .article-button {
  opacity: 1;
}

.content-article-recent {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 48.61%;
  height: 174.61px;
}

.content-article-recent h1 {
  font-family: "HostGrotesk_regular";
  font-size: 20px;
  line-height: 130%;
  font-weight: 500 !important;
  letter-spacing: 0;
  vertical-align: middle;
  margin: 0px !important;
}

.content-article-recent span {
  font-family: "HostGrotesk_regular";
  font-size: 14px;
  line-height: 100%;
  font-weight: 400 !important;
  letter-spacing: 0;
  vertical-align: middle;
  margin: 0px !important;
  color: #A2A3A8;
}

.article-tags {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  gap: 20px;
  flex-wrap: wrap;
}

.article-tags a {
  /*
      $colors attendu :
      (
          default: #007bff,
          hover: #0056b3,
          focus: #80bdff,
          active: #c0c0c0
      );
  */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 12px !important;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 18.5rem;
  overflow: hidden;
  cursor: pointer !important;
  white-space: nowrap;
  padding: 4px 12px !important;
  height: 24px;
  border-radius: 999px !important;
  background-color: #fff !important;
  color: #027373 !important;
  text-decoration: none;
}
.article-tags a:hover {
  background-color: #DAFAFB !important;
}
.article-tags a:focus, .article-tags a:focus-visible, .article-tags a:focus-within {
  background-color: #DAFAFB !important;
}
.article-tags a:active {
  background-color: #027373 !important;
  color: #fff !important;
}

.big-more-article {
  display: flex;
  justify-content: center;
}

.drop-cap::first-letter {
  float: left;
  font-size: 4em;
  line-height: 0.85;
  margin-right: 10px;
  margin-top: 8px;
  font-weight: bold;
  color: #f25f29;
  font-family: "HostGrotesk_regular";
}

.drop-cap {
  text-align: justify;
  line-height: 1.6;
}

h1.h1-title-article {
  font-family: "HostGrotesk_regular";
  font-size: 28px;
  line-height: 123%;
  font-weight: 500 !important;
  letter-spacing: 0;
  vertical-align: middle;
  margin: 0px !important;
  color: #026969;
}

.content-article {
  font-family: "HostGrotesk_regular";
  line-height: 133%;
  font-style: 400;
}

/** Responsif */
@media screen and (max-width: 768px) {
  .section-header {
    flex-direction: column-reverse;
  }
  .image-article, .content-text, .form-comment {
    width: 100%;
  }
  .image-article {
    height: 302.22px;
  }
  .body-try {
    padding: 48px 20px;
    border-radius: 0%;
  }
  .action-try {
    max-width: unset;
    width: unset;
  }
  .principal, .bloc1-form {
    flex-direction: column;
    height: auto;
  }
  .section-detail-article {
    display: flex;
    flex-direction: column;
    gap: 36px;
  }
  .image-comment {
    display: none;
  }
  .body-try {
    gap: 25px;
  }
  .row-article-more {
    display: flex;
    flex-direction: column;
    gap: 43.9px;
  }
  .drop-cap::first-letter {
    margin: 5% 1% 5% 0;
  }
}
@media (min-width: 769px) and (max-width: 1189px) {
  .section-header {
    flex-direction: column-reverse;
  }
  .image-article, .content-text, .form-comment {
    width: 100%;
  }
  .image-article {
    height: 302.22px;
  }
  .body-try {
    padding: 48px 50px;
    border-radius: 0%;
  }
  .action-try {
    max-width: unset;
    width: unset;
  }
  .principal {
    flex-direction: column;
  }
  .image-comment {
    display: none;
  }
  .body-try {
    gap: 25px;
  }
  .row-article-more {
    display: flex;
    gap: 43.9px;
    flex-wrap: wrap;
  }
  .card-article-more {
    flex: 1;
    gap: 36px;
  }
}/*# sourceMappingURL=index.css.map */