.mission-values-section {
  background-color: var(--color-background);

  & .mission-values-section__container {
    max-width: 100%;
    padding-block: 64px;
    padding-inline: 0;
    @media (width >= 1280px) {
      padding-inline: 0;
      padding-bottom: 220px;
      padding-top: 140px;
    }
    & .mission-values-section__content-wrapper {
      display: flex;
      flex-direction: column;
      gap: 16px;
      @media (width >= 1024px) {
        flex-direction: row;
        gap: 24px;
      }
      @media (width >= 1366px) {
        gap: 112px;
      }
      & .mission-values-section__mission-column {
        flex: 12;
        @media (width >= 1024px) {
          flex: 6;
          max-width: 619px;
        }
        & .mission-values-section__title {
          line-height: 1.2;
          text-transform: capitalize;
          margin-bottom: 20px;
        }
        & .mission-values-section__text {
          color: var(--color-foreground);
          line-height: 1.5;
          margin-top: 0;
          @media (width >= 1024px) {
            max-width: 448px;
          }
        }
        & .mission-card-gallery {
          display: grid;
          gap: 44px;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          margin-top: 40px;
          place-items: center;
          
          @media (width >= 640px) {
            gap: 24px;
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
          @media(width >= 1024px) {
            display: flex;
            gap: 44px;
          }
          & .card-semi-circle {
            height: 400px;
            max-width: 264px;
            width: 100%;
            @media(width <= 480px){
                      height: 200px;
                    }
            &:hover {
              & .card-semi-circle__border-wrapper {
                & .card-semi-circle__image-container {
                  & .card-semi-circle__overlay {
                    opacity: 1;
                    z-index: 0;
                  }
                }
              }
            }
            &.card-semi-circle--left {
              & .card-semi-circle__border-wrapper {
                & .card-semi-circle__image-container {
                  left: 10px;
                }
              }
            }
            &.card-semi-circle--right {
              @media(width >= 480px){
                translate: 0px 32px;
              }
              & .card-semi-circle__border-wrapper {
                & .card-semi-circle__image-container {
                  left: -10px;
                }
              }
            }
            & .card-semi-circle__border-wrapper {
              border: 1px solid #A46C32;
              border-bottom-right-radius: calc(infinity * 1px);
              border-bottom-left-radius: calc(infinity * 1px);
              height: 100%;
              padding-block: 10px;
              padding-inline: 10px;
              position: relative;
              width: 100%;
              & .card-semi-circle__image-container {
                height: 100%;
                min-width: 100%;
                position: absolute;
                top: -10px;
                width: 100%;
                & .card-semi-circle__image {
                  border-bottom-right-radius: calc(infinity * 1px);
                  border-bottom-left-radius: calc(infinity * 1px);
                  height: 400px;
                  overflow: hidden;
                  width: 100%;
                    @media(width <= 480px){
                      height: 200px;
                    }
                }
                & .card-semi-circle__overlay {
                  align-items: center;
                  background-color: rgb(164 108 50 / 0.6);
                  border-bottom-right-radius: calc(infinity * 1px);
                  border-bottom-left-radius: calc(infinity * 1px);
                  display: flex;
                  height: 100%;
                  justify-content: center;
                  left: 0;
                  opacity: 0;
                  position: absolute;
                  top: 0;
                  transition: opacity;
                  transition-duration: 300ms;
                  transition-timing-function: linear;
                  width: 100%;
                  z-index: -10;
                  & .card-semi-circle__button {
                    align-items: center;
                    border: 1px solid var(--color-background);
                    border-radius: 100%;
                    color: var(--color-background);
                    display: flex;
                    font-weight: 700;
                    height: 128px;
                    justify-content: center;
                    text-decoration: none;
                    text-transform: uppercase;
                    width: 128px;
                    @media (width >= 1280px) {
                      width: 192px;
                      height: 192px;
                    }
                    & .card-semi-circle__button-text {
                      font-family: var(--font-body--family);
                      font-size: 16px;
                      display: block;
                      line-height: 24px;
                      max-width: 80px;
                      text-align: center;
                      width: 100%;
                    }
                  }
                }
              }
            }
          }
        }
      }
      & .mission-values-section__values-column {
        & .mission-values-section__title {

          margin-bottom: 24px;
          text-transform: capitalize;
        }
        & .mission-values-section__values-list {
          display: flex;
          flex-direction: column;
          gap: 24px;
          & .value-item {
            align-items: center;
            background-color: rgba(248, 243, 236, 0.20);
            background-image: url('/cdn/shop/files/our-core-values-background.webp?v=1760397529');
            background-position: center;
            background-size: cover;
            border: 1px solid rgb(164 108 50 / 0.40);
            display: flex;
            gap: 16px;
            padding-block: 20px;
            padding-inline: 20px;
            & .value-item__icon-wrapper {
                width: 64px;
                & .value-item__icon {
                    height: 64px;
                    width: 64px;
                }
            }
            & .value-item__content {
                width: 100%;
                & .value-item__title {
                    margin-bottom: 5px;
                    
                }
                & .value-item__text {
                    color: var(--color-foreground);
                    font-weight: 400;
                    line-height: 1.5;
                    margin-top: 0;
                }
            }
          }
        }
      }

      & .mission-values-section__divider {
        border-left: 1px solid rgba(50, 29, 29, 0.15);
      }
    }
  }
}