@media screen and (max-width: 1225px) {
  .inner-frame {
    display: none !important;
  }

  .squar-content {
    flex-direction: column-reverse !important;
  }

  .img-container {
    height: 10rem !important;
    width: unset !important;
  }

  .squar-title {
    text-align: center !important;
    margin-bottom: unset !important;
  }

  .squar-wrapper {
    padding: unset !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .squar-block {
    justify-content: center !important;
    align-items: center !important;
  }

  .squar-hoverable:hover > .squar-wrapper {
    height: 294px !important;
    position: relative !important;
  }

  /*.squar-wrapper:hover {*/
  /*  transform: unset !important;*/
  /*}*/
}

@media screen and (max-width: 650px) {
  .squar-block {
    flex-basis: calc(50% - 1rem) !important;
    max-width: calc(50% - 1rem) !important;
  }

  .squar-hoverable:hover > .squar-wrapper {
    height: 200px !important;
    position: relative !important;
  }

  .squar-wrapper {
    height: 200px !important;
  }

  /*.squar-wrapper:hover {*/
  /*  transform: unset !important;*/
  /*}*/

  .img-container {
    height: 8rem !important;
  }

  .squar-title {
    font-size: 1.25rem !important;
  }
}

@media screen and (max-width: 550px) {
  .img-container {
    height: 8rem !important;
  }

  .squar-title {
    font-size: 1rem !important;
  }
}

@media screen and (max-width: 400px) {
  .img-container {
    height: 6rem !important;
  }

  .squar-title {
    font-size: 1rem !important;
  }
}

.squar-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 2rem 0 2rem 0;
  justify-content: center;
}

.squar-title {
  color: var(--primary-black);
  margin-bottom: 4rem;
  text-align: left;
  font-family: revert;
  font-size: var(--h2-24-font-size, 24px);
  font-weight: var(--h2-24-font-weight, 700);
  position: relative;
  align-self: stretch;
  font-style: normal;
}

.squar-hoverable:hover > .squar-wrapper {
  height: unset;
  z-index: 200;
  position: absolute;
}

.squar-hoverable:hover .inner-frame {
  overflow: unset;
  max-height: unset;
  position: relative !important;
}

.squar-content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  gap: 1rem;
}

.squar-wrapper {
  position: relative;
  background: var(--g6, #f6f6f6);
  height: 294px;
  transition: background-color 0.3s, transform 0.3s;
  box-sizing: border-box;
  border-radius: 0.5rem;
  padding: 1.5rem 0 1.5rem 1.5rem;
  overflow: hidden;
}

.squar-wrapper:hover {
  transform: scale(1.050);
}

.squar-0-wrapper-color:hover {
  background-color: #DFE2FF;
}

.squar-1-wrapper-color:hover {
  background-color: #DFF3FF;
}

.squar-2-wrapper-color:hover {
  background-color: #FFF6DF;
}

.squar-3-wrapper-color:hover {
  background-color: #FCECFF;
}

.squar-4-wrapper-color:hover {
  background-color: #E2FFF8;
}

.squar-5-wrapper-color:hover {
  background-color: #FFF2E2;
}

.squar-block {
  position: relative;
  flex-basis: calc(33.3% - 1rem);
  flex-shrink: 0;
  flex-grow: 1;
  max-width: calc(33.3% - 1rem);
}

.squar-block-0:hover {
  background-color: #DFE2FF;
  transform: scale(1.050);
}

.squar-block-1 {
  box-sizing: border-box;
  background: var(--g6, #f6f6f6);
  border-radius: 8px;
  padding: 24px 0px 24px 24px;
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  height: 294px;
  position: relative;
  overflow: hidden;
  width: calc(33.3% - 16px);
  transition: background-color 0.3s, transform 0.3s;
}

.squar-block-1:hover {
  background-color: #DFF3FF;
  transform: scale(1.050);
}

.squar-block-2 {
  box-sizing: border-box;
  background: var(--g6, #f6f6f6);
  border-radius: 8px;
  padding: 24px 0px 24px 24px;
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  height: 294px;
  position: relative;
  overflow: hidden;
  width: calc(33.3% - 16px);
  transition: background-color 0.3s, transform 0.3s;
}

.squar-block-2:hover {
  background-color: #FFF6DF;
  transform: scale(1.050);
}

.squar-block-3 {
  box-sizing: border-box;
  background: var(--g6, #f6f6f6);
  border-radius: 8px;
  padding: 24px 0px 24px 24px;
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  height: 294px;
  position: relative;
  overflow: hidden;
  width: calc(33.3% - 16px);
  transition: background-color 0.3s, transform 0.3s;
}

.squar-block-3:hover {
  background-color: #FCECFF;
  transform: scale(1.050);
}

.squar-block-4 {
  box-sizing: border-box;
  background: var(--g6, #f6f6f6);
  border-radius: 8px;
  padding: 24px 0px 24px 24px;
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  height: 294px;
  position: relative;
  overflow: hidden;
  width: calc(33.3% - 16px);
  transition: background-color 0.3s, transform 0.3s;
}

.squar-block-4:hover {
  background-color: #E2FFF8;
  transform: scale(1.050);
}

.squar-block-5 {
  box-sizing: border-box;
  background: var(--g6, #f6f6f6);
  border-radius: 8px;
  padding: 24px 0px 24px 24px;
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  height: auto;
  position: relative;
  overflow: hidden;
  width: calc(33.3% - 16px);
  transition: background-color 0.3s, transform 0.3s;
}

.squar-block-5:hover {
  background-color: #FFF2E2;
  transform: scale(1.050);
}

.frame {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  align-self: stretch;
  flex: 1;
  position: relative;
}

.inner-frame {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  align-items: stretch; /* изменено */
  justify-content: flex-start;
  flex-wrap: wrap;
  align-self: stretch;
  flex-shrink: 0;
  position: absolute;
  bottom: 0;
  overflow: hidden;
  max-height: 5.5rem;
  margin-top: auto;
  transition: background-color 0.3s, transform 0.3s, height 0.3s;
  min-width: 150px;
}

.chip-block {
  cursor: pointer;
  background: rgba(5, 0, 15, 0.2);
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
  transition: background-color 0.3s, transform 0.3s;
  transition: opacity 0.5s ease;
  text-decoration: none;
  height: 22px;

}

.chip-text {
  text-decoration: none !important;
  color: #ffffff !important;
  font-size: var(--uppercase-11-font-size) !important;
  font-weight: var(--uppercase-11-font-weight) !important;
}

.chip-block:hover {
  background: var(--w) !important;
}

.chip-block:hover .chip-text {
  color: var(--primary-black) !important;
} 

.inner-chip {
  color: var(--w, #ffffff) !important;
  border-radius: 0.25rem;
  text-align: left;
  font-family: revert;
  font-size: var(--uppercase-11-font-size);
  font-weight: var(--uppercase-11-font-weight);
  text-transform: uppercase;
  /* position: relative; */
  text-decoration: none;

  transition: color 0.3s, transform 0.3s;
}

.inner-chip:hover {
  color: var(--primary-black) !important;
}

.img-container {
  align-self: stretch;
  flex-shrink: 0;
  width: 200px;
  height: 15rem;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.inner-block {
  position: absolute;
  left: calc(50% - 60px);
  top: 0;
  overflow: hidden;
}

.image-preview {
  /*width: 100%;*/
  /*height: 100%;*/
  object-fit: contain;
}