.ocultar {
   display: none;
}

.help-center {
   display: grid;
   grid-template-columns: 280px 1fr;
   gap: 2.4rem;
   padding: 0 2.4rem;
   margin-bottom: 200px;

   .help-center__sidebar {
      padding: 4rem 0 0;
   }

   .help-center__search {
      margin-bottom: 2rem;
      position: relative;

      .help-center__search-input {
         width: 100%;
         padding: 1.3rem 5.6rem 1.3rem 1.2rem;
         border: 1px solid var(--text-secondary-color);
         border-radius: 24px;
         font-size: 1.6rem;
         transition: border-color 0.2s ease;

         &:focus {
            outline: none;
            border-color: var(--purple);
         }

         &::-webkit-search-cancel-button {
            -webkit-appearance: none;
            appearance: none;
            height: 16px;
            width: 16px;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238189D8'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
            background-size: 16px 16px;
            background-repeat: no-repeat;
            background-position: center;
            cursor: pointer;
            margin-right: 0.5rem;
         }

         /* Para Firefox */
         &[type="search"]::-moz-clear {
            filter: invert(48%) sepia(25%) saturate(1234%) hue-rotate(205deg) brightness(92%) contrast(86%);
         }
      }

      .help-center__search-btn {
         position: absolute;
         right: 0.5rem;
         top: 0;
         background: none;
         border: none;
         padding: 1rem;
         cursor: pointer;
         display: flex;
         align-items: center;
         justify-content: center;
         transition: color 0.2s ease;

         &:hover,
         &:focus {
            color: #1e5cb3;
         }

         svg {
            width: 24px;
            height: 24px;
         }

         .help-center__search-ico {
            display: flex;
            align-items: center;
         }
      }
   }

   .help-center__categories {
      .help-center__categories-title {
         font-size: 1.9rem;
      }

      .help-center__category-list {
         list-style: none;
         margin: 0;
         padding: 0;

         .help-center__category {
            margin-bottom: 0.8rem;

            a {
               color: var(--text-secondary-color);
               text-decoration: none;
               font-size: 1.9rem;

               &:hover {
                  color: var(--text-color);
               }
            }
         }

         .help-center__category--active a {
            font-weight: 700;
            color: var(--text-color);
            position: relative;

            &:after {
               position: absolute;
               content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6c0 0 6 4.4189 6 6s-6 6-6 6' /></svg>");
               display: inline-block;
               bottom: -7px;
               right: -18px;
            }
         }
      }
   }

   .help-center__content {
      box-shadow: var(--shadow);
      padding: 2.4rem;
      margin-top: 4rem;
      border-radius: 1.6rem;

      .help-center__article__contents {
         h1 {
            font-size: 2.3rem;
            font-weight: 700;
         }

         h2 {
            font-size: 2.4rem;
            font-weight: 400;
            margin-bottom: 1.6rem;
         }

         h3 {
            font-size: 2rem;
            font-weight: 400;
            margin-bottom: 1.6rem;
         }

         li {
            font-size: 1.9rem;
         }

         p {
            font-size: 1.9rem;
         }

         ol {
            li {
               list-style-type: decimal;
            }
         }

         ul {
            li {
               list-style-type: disc;
            }
         }

         a {
            color: var(--purple);

            &:hover {
               text-decoration: underline;
            }
         }
      }

      .help-center__article__update {
         margin-top: 2.4rem;
         font-size: 1.4rem;
         font-style: italic;
         text-align: right;
      }

      .help-center__related__articles {
         margin-top: 2.4rem;
         border-top: 1px solid var(--text-secondary-color);
         padding-top: 1.6rem;

         .help-center__related__articles-title {
            font-size: 2rem;
         }

         .help-center__articles {
            margin-top: 2.4rem;
         }
      }

      .team-section {
         margin-top: 2rem;

         .team-subtitle {
            font-weight: 700;
            font-size: 18px;
            margin: 3rem 0 2rem 0;
            color: var(--text-color);
         }

         .team-subtitle:first-child {
            margin-top: 0;
         }

         .team-member {
            display: flex;
            flex-direction: row;
            margin-bottom: 3rem;
            align-items: center;
         }

         .team-image-container {
            flex-shrink: 0;
            width: 170px;
            height: 206px;
            display: flex;
            justify-content: center;
            margin: 0 0 0 3rem;
         }

         .team-image {
            width: 170px;
            height: 206px;
            object-fit: cover;
            border-radius: 8px;
         }

         .team-info {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            margin: 0 1rem 0 3rem;
         }

         .team-name {
            font-weight: 700;
            font-size: 16px;
            color: var(--text-color);
         }

         .team-desc {
            font-weight: 400;
            font-size: 16px;
            color: var(--text-color);
            line-height: 1.5;
            margin: 0;
         }
      }
   }

   .help-center__header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 3.2rem;

      /* Ocultar buscador móvil en desktop */
      .help-center__search--mobile {
         display: none;
      }

      .help-center__theme {
         font-size: 4rem !important;
         margin: 0 0 1rem !important;
         font-weight: 800 !important;
         color: var(--text-color) !important;
         line-height: 1.2 !important;
      }

      .help-center__title {
         font-size: 4rem !important;
         margin: 0 0 1.2rem !important;
         font-weight: 700 !important;
         color: var(--text-color) !important;
         line-height: 1.3 !important;
      }

      .help-center__subtitle {
         margin: 0.8rem 0 0;
         font-size: 1.6rem;
         color: var(--text-secondary-color);
      }

      .help-center__sort {
         border: 1px solid var(--text-color);
         border-radius: 8px;
         padding: 1.3rem 3rem 1.3rem 0.8rem;
         font-size: 1.6rem;
         appearance: none;
         background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23141B34' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
         background-repeat: no-repeat;
         background-position: right 0.5rem center;
         background-size: 20px;
      }
   }

   .help-center__articles {
      list-style: none;
      margin: 0;
      padding: 0;

      .help-center__article {
         margin-bottom: 1rem;

         a {
            color: var(--purple);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            font-size: 1.9rem;

            &::before {
               content: "📄";
               margin-right: 0.5rem;
               font-size: 1.9rem;
               color: black
            }

            &:hover {
               text-decoration: underline;
            }
         }
      }
   }
}

/* ===== RESPONSIVE ===== */
/* Desktop grande */
@media (max-width: 1248px) {
   .help-center {
      padding: 0 1.6rem;
   }
}

/* Tablet y móvil */
@media (max-width: 738px) {
   .help-center {
      grid-template-columns: 1fr;
      padding: 2.5rem;
      margin-bottom: 100px;

      .help-center__sidebar {
         order: 2;
         border-right: none;
         padding: 2.4rem 0 0;

         .help-center__search {
            display: none;
            /* Ocultar buscador del sidebar en responsive */
         }

         .help-center__categories {
            .help-center__categories-title {
               font-size: 1.9rem;
            }

            .help-center__category-list {
               .help-center__category {
                  margin-bottom: 0.8rem;

                  a {
                     font-size: 1.9rem;
                     padding: 0.8rem 0;
                     display: block;
                  }
               }
            }
         }
      }

      .help-center__content {
         order: 1;
         padding: 2rem;
         margin-top: 2.4rem;

         .help-center__article__contents {
            h1 {
               font-size: 2.3rem;
               margin-top: 0;
            }

            h2 {
               font-size: 2rem;
               margin-bottom: 1.2rem;
            }

            h3 {
               font-size: 1.6rem;
               margin-bottom: 1rem;
            }

            li {
               font-size: 1.9rem;
            }

            p {
               font-size: 1.9rem;
            }
         }

         .help-center__article__update {
            font-size: 1.2rem;
            margin-top: 2rem;
         }

         .help-center__related__articles {
            margin-top: 2rem;
            padding-top: 1.4rem;

            .help-center__related__articles-title {
               font-size: 1.8rem;
            }

            .help-center__articles {
               margin-top: 1.6rem;

               .help-center__article a {
                  font-size: 1.9rem;
               }
            }
         }
      }

      .help-center__content {
         order: 1;
         padding: 2rem;
         margin-top: 2.4rem;

         .help-center__article__contents {
            h1 {
               font-size: 2.3rem;
               margin-top: 0;
            }

            h2 {
               font-size: 2rem;
               margin-bottom: 1.2rem;
            }

            h3 {
               font-size: 1.6rem;
               margin-bottom: 1rem;
            }

            li {
               font-size: 1.9rem;
            }

            p {
               font-size: 1.9rem;
            }
         }

         .help-center__article__update {
            font-size: 1.2rem;
            margin-top: 2rem;
         }

         .help-center__related__articles {
            margin-top: 2rem;
            padding-top: 1.4rem;

            .help-center__related__articles-title {
               font-size: 1.8rem;
            }

            .help-center__articles {
               margin-top: 1.6rem;

               .help-center__article a {
                  font-size: 1.9rem;
               }
            }
         }
      }

      .help-center__header {
         flex-direction: column;
         gap: 0;
         margin-bottom: 2.4rem;

         .help-center__theme {
            font-size: 3rem !important;
            margin-bottom: 1rem !important;
         }

         .help-center__title {
            font-size: 2rem !important;
         }

         .help-center__subtitle {
            font-size: 1.6rem;
            margin-bottom: 1.6rem;
         }

         /* Mostrar buscador móvil dentro del header en responsive */
         .help-center__search--mobile {
            display: block !important;
            order: 2;
            position: relative;
            width: 100%;
            margin-bottom: 1.9rem;

            .help-center__search-input {
               width: 100%;
               padding: 1.3rem 4.4rem 1.3rem 1.2rem;
               border: 1px solid var(--text-color);
               border-radius: 8px;
               font-size: 1.6rem;
               font-family: inherit;
               color: var(--text-color);
               transition: border-color 0.2s ease;

               &:focus {
                  outline: none;
                  border-color: var(--purple);
               }

               /* Estilos para el botón X de limpiar en navegadores Webkit/Blink */
               &::-webkit-search-cancel-button {
                  -webkit-appearance: none;
                  appearance: none;
                  height: 16px;
                  width: 16px;
                  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238189D8'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
                  background-size: 16px 16px;
                  background-repeat: no-repeat;
                  background-position: center;
                  cursor: pointer;
                  margin-right: 0.5rem;
               }

               /* Para Firefox */
               &[type="search"]::-moz-clear {
                  filter: invert(48%) sepia(25%) saturate(1234%) hue-rotate(205deg) brightness(92%) contrast(86%);
               }
            }

            .help-center__search-btn {
               position: absolute;
               right: 0.5rem;
               top: 50%;
               transform: translateY(-50%);
               background: none;
               border: none;
               padding: 0.8rem;
               cursor: pointer;
               display: flex;
               align-items: center;
               justify-content: center;
               transition: color 0.2s ease;
               height: 100%;

               &:hover,
               &:focus {
                  color: #1e5cb3;
               }

               svg {
                  width: 16px;
                  height: 16px;
               }

               .help-center__search-ico {
                  display: flex;
                  align-items: center;
                  justify-content: center;
               }
            }
         }

         .help-center__sort {
            padding: 1.3rem 3rem 1.3rem 1rem;
            font-size: 1.6rem;
            font-family: inherit;
            color: var(--text-color);
            width: 100%;
            order: 3;
            appearance: none;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23141B34' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
            background-repeat: no-repeat;
            background-position: right 0.5rem center;
            background-size: 20px;
         }
      }

      .help-center__articles {
         .help-center__article {
            margin-bottom: 1.2rem;

            a {
               font-size: 1.9rem;
               line-height: 1.5;
               word-break: break-word;

               &::before {
                  font-size: 1.9rem;
                  flex-shrink: 0;
               }
            }
         }
      }
   }
}

/* Móvil pequeño (360px - 480px) */
@media (max-width: 480px) {
   .help-center {
      padding: 0rem;
      margin-bottom: 80px;

      .help-center__sidebar {
         padding: 0rem 0 0;

         .help-center__search {
            display: none;
            /* Mantener oculto en móvil pequeño también */
         }

         .help-center__categories {
            .help-center__categories-title {
               font-size: 1.9rem;
               margin-bottom: 1.2rem;
            }
         }
      }

      .help-center__content {
         padding: 2.4rem;
         margin-top: 4.4rem;
         border-radius: 1.2rem;

         .help-center__article__contents {
            h1 {
               font-size: 2.3rem;
            }

            h2 {
               font-size: 1.9rem;
            }

            h3 {
               font-size: 1.4rem;
            }

            li,
            p {
               font-size: 1.9rem;
            }
         }

         .help-center__related__articles {
            .help-center__related__articles-title {
               font-size: 1.9rem;
            }
         }

         .team-section {
            .team-member {
               flex-direction: column;
               align-items: center;
               text-align: left;
               gap: 2.5rem;
            }

            .team-image-container {
               margin: 0 auto;
            }

            .team-info {
               width: 100%;
               margin: 0;
            }

            .team-name,
            .team-desc {
               font-size: 14px;
            }
         }
      }

      .help-center__header {
         gap: 0;
         margin-bottom: 2rem;

         .help-center__theme {
            font-size: 2.4rem !important;
            margin-bottom: 1rem !important;
         }

         .help-center__title {
            font-size: 2.3rem !important;
         }

         .help-center__subtitle {
            font-size: 1.6rem;
            margin-bottom: 1.6rem;
         }

         /* Ajustar buscador móvil en pantallas pequeñas */
         .help-center__search--mobile {
            display: block !important;
            order: 2;
            width: 100%;
            margin-bottom: 1.9rem;

            .help-center__search-input {
               font-size: 1.6rem;
               padding: 1.3rem 4rem 1.3rem 1.2rem;
               font-family: inherit;
               color: var(--text-color);

               /* Estilos para el botón X de limpiar en navegadores Webkit/Blink */
               &::-webkit-search-cancel-button {
                  -webkit-appearance: none;
                  appearance: none;
                  height: 16px;
                  width: 16px;
                  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238189D8'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
                  background-size: 16px 16px;
                  background-repeat: no-repeat;
                  background-position: center;
                  cursor: pointer;
                  margin-right: 0.5rem;
               }

               /* Para Firefox */
               &[type="search"]::-moz-clear {
                  filter: invert(48%) sepia(25%) saturate(1234%) hue-rotate(205deg) brightness(92%) contrast(86%);
               }
            }

            .help-center__search-btn {
               right: 0.5rem;
               top: 50%;
               transform: translateY(-50%);
               height: 100%;

               svg {
                  width: 16px;
                  height: 16px;
               }
            }
         }

         .help-center__sort {
            font-size: 1.6rem;
            font-family: inherit;
            color: var(--text-color);
            order: 3;
            appearance: none;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23141B34' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
            background-repeat: no-repeat;
            background-position: right 0.5rem center;
            background-size: 20px;
            padding-right: 3rem;
         }
      }
   }
}

/* === TABLET DESIGN (739px - 1023px) === */
@media screen and (min-width: 739px) and (max-width: 1023px) {
   .help-center {
      grid-template-columns: 1fr;
      padding: 0rem;
      margin-bottom: 100px;

      .help-center__sidebar {
         order: 2;
         border-right: none;
         padding: 2.4rem 0 0;

         .help-center__search {
            display: none;
            /* Ocultar buscador del sidebar en responsive */
         }

         .help-center__categories {
            .help-center__categories-title {
               font-size: 1.9rem;
            }

            .help-center__category-list {
               .help-center__category {
                  margin-bottom: 0.8rem;

                  a {
                     font-size: 1.9rem;
                     padding: 0.8rem 0;
                     display: block;
                  }
               }
            }
         }
      }

      .help-center__content {
         order: 1;
         padding: 2rem;
         margin-top: 2.4rem;

         .help-center__article__contents {
            h1 {
               font-size: 2.3rem;
               margin-top: 0;
            }

            h2 {
               font-size: 2rem;
               margin-bottom: 1.2rem;
            }

            h3 {
               font-size: 1.6rem;
               margin-bottom: 1rem;
            }

            li {
               font-size: 1.9rem;
            }

            p {
               font-size: 1.9rem;
            }
         }

         .help-center__article__update {
            font-size: 1.2rem;
            margin-top: 2rem;
         }

         .help-center__related__articles {
            margin-top: 2rem;
            padding-top: 1.4rem;

            .help-center__related__articles-title {
               font-size: 1.8rem;
            }

            .help-center__articles {
               margin-top: 1.6rem;

               .help-center__article a {
                  font-size: 1.9rem;
               }
            }
         }
      }

      .help-center__header {
         flex-direction: column;
         gap: 0;
         margin-bottom: 2.4rem;

         .help-center__theme {
            font-size: 3rem !important;
            margin-bottom: 1rem !important;
         }

         .help-center__title {
            font-size: 2.3rem !important;
         }

         .help-center__subtitle {
            font-size: 1.6rem;
            margin-bottom: 1.6rem;
         }

         /* Mostrar buscador móvil dentro del header en responsive */
         .help-center__search--mobile {
            display: block !important;
            order: 2;
            position: relative;
            width: 100%;
            margin-bottom: 1.9rem;

            .help-center__search-input {
               width: 100%;
               padding: 1.3rem 4.4rem 1.3rem 1.2rem;
               border: 1px solid var(--text-color);
               border-radius: 8px;
               font-size: 1.6rem;
               font-family: inherit;
               color: var(--text-color);
               transition: border-color 0.2s ease;

               &:focus {
                  outline: none;
                  border-color: var(--purple);
               }

               /* Estilos para el botón X de limpiar en navegadores Webkit/Blink */
               &::-webkit-search-cancel-button {
                  -webkit-appearance: none;
                  appearance: none;
                  height: 16px;
                  width: 16px;
                  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238189D8'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
                  background-size: 16px 16px;
                  background-repeat: no-repeat;
                  background-position: center;
                  cursor: pointer;
                  margin-right: 0.5rem;
               }

               /* Para Firefox */
               &[type="search"]::-moz-clear {
                  filter: invert(48%) sepia(25%) saturate(1234%) hue-rotate(205deg) brightness(92%) contrast(86%);
               }
            }

            .help-center__search-btn {
               position: absolute;
               right: 0.5rem;
               top: 50%;
               transform: translateY(-50%);
               background: none;
               border: none;
               padding: 0.8rem;
               cursor: pointer;
               display: flex;
               align-items: center;
               justify-content: center;
               transition: color 0.2s ease;
               height: 100%;

               &:hover,
               &:focus {
                  color: #1e5cb3;
               }

               svg {
                  width: 16px;
                  height: 16px;
               }

               .help-center__search-ico {
                  display: flex;
                  align-items: center;
                  justify-content: center;
               }
            }
         }

         .help-center__sort {
            padding: 1.3rem 3rem 1.3rem 1rem;
            font-size: 1.6rem;
            font-family: inherit;
            color: var(--text-color);
            width: 100%;
            order: 3;
            appearance: none;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23141B34' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
            background-repeat: no-repeat;
            background-position: right 0.5rem center;
            background-size: 20px;
         }
      }

      .help-center__articles {
         .help-center__article {
            margin-bottom: 1.2rem;

            a {
               font-size: 1.9rem;
               line-height: 1.5;
               word-break: break-word;

               &::before {
                  font-size: 1.9rem;
                  flex-shrink: 0;
               }
            }
         }
      }
   }
}

.media-section {
   display: flex;
   flex-direction: column;
   margin-top: 2rem;
   border-top: 1px solid #e0e0e0;
   padding-top: 3rem;
}

.media-article {
   display: grid;
   grid-template-columns: 2fr 1fr;
   grid-template-areas:
      "radio image"
      "body  image";
   column-gap: 2rem;
   row-gap: 0.5rem;
   margin-bottom: 3rem;
   padding-bottom: 2rem;
   border-bottom: 1px solid #e0e0e0;
}

.media-article:first-of-type {
   border-top: 1px solid #e0e0e0;
   padding-top: 3rem;
   margin-top: 2rem;
}

.media-article:last-child {
   border-bottom: none;
   margin-bottom: 0;
   padding-bottom: 0;
}

.media-article__radio {
   grid-area: radio;
   font-weight: 500;
   font-size: 16px;
   color: var(--text-color);
   display: flex;
   align-items: center;
   gap: 0.8rem;
}

.media-article__radio img {
   max-width: 24px;
   max-height: 24px;
   object-fit: contain;
   border-radius: 4px;
}

.media-article__body {
   grid-area: body;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
}

.media-article__image {
   grid-area: image;
   min-width: 0;
   overflow: hidden;
   border-radius: 8px;
   align-self: center;
}

.media-article__image img {
   display: block;
   width: 100%;
   max-width: 100%;
   height: auto;
   border-radius: 8px;
   background-color: #f5f5f5;
}

.media-article__title {
   font-weight: 700;
   font-size: 18px;
   color: var(--text-color);
   margin: 0;
   line-height: 1.5;
}

.media-article__desc {
   font-weight: 400;
   font-size: 16px;
   color: var(--text-color);
   margin: 0;
   line-height: 1.5;
}

.media-article__link {
   font-weight: 600;
   font-size: 16px;
   color: var(--purple);
   text-decoration: none;
   margin: 0.5rem 0;
}

.media-article__link:hover {
   text-decoration: underline;
}


/* Tablet (min-width: 739px) and (max-width: 1023px) */
@media screen and (min-width: 739px) and (max-width: 1023px) {
   .media-article {
      grid-template-columns: 5fr 3fr;
      grid-template-areas:
         "radio radio"
         "body  image";
      column-gap: 1.5rem;
   }

   .media-article__image {
      align-self: start;
   }
}

/* Mobile (max-width: 738px) */
@media screen and (max-width: 738px) {
   .media-article {
      grid-template-columns: 1fr;
      grid-template-areas:
         "image"
         "radio"
         "body";
      row-gap: 1.5rem;
   }

   .media-article__image img {
      position: static;
      width: 100%;
      height: auto;
      max-height: 250px;
      object-fit: cover;
   }
}