.about-wrapper {
  /* border-bottom: 4rem solid var(--accent-color); */
  background-image: repeating-radial-gradient(
    circle at 125% 50%,
    hsl(from var(--black) h s l / 0.05) 0.5px,
    transparent 2px,
    transparent 40px
  );

  padding-block: var(--spacing-xxl);
  @media screen and (max-width: 768px) {
    padding-block: var(--spacing-md);
  }
}

.about-blocks-wrapper {
  display: flex;
  flex-direction: column;
  gap: 5rem;

  @media screen and (max-width: 768px) {
    gap: 2rem;
  }
}

.about-block {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 auto;
  padding: 2rem;
  border: 1px solid hsl(from var(--accent-color) h s l / 0.15);
  border-radius: var(--radius-md);
  backdrop-filter: blur(1px);
  background-image: radial-gradient(
    circle at 50% 125%,
    hsl(from var(--accent-color) h s l / 0.05) 0.5px,
    var(--white)
  );
  box-shadow: 0 0.5rem 2rem hsl(from var(--primary-color) h s l / 0.15);

  &:not(.reverse) {
    margin-left: 5rem;
    padding-left: 0;
    @media screen and (max-width: 768px) {
      margin: 0;
    }
  }

  &.reverse {
    flex-direction: row-reverse;
    margin-right: 5rem;
    padding-right: 0;
    @media screen and (max-width: 768px) {
      margin: 0;
    }
  }

  @media screen and (max-width: 768px) {
    flex-direction: column !important;
    align-items: center;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border: none;
  }
}

.about-block .img-wrapper {
  overflow: hidden;
  border-radius: 3rem;
  height: 280px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-xs);
  /* border: 2px solid red; */
  flex: 0 0 auto;
  padding-block: 0;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
  }

  @media (max-width: 1200px) {
    min-width: 320px;
  }

  @media screen and (max-width: 768px) {
    width: 100%;
    border-radius: 0;
  }
}

.about-block img {
  display: block;
  height: 320px;

  @media (max-width: 1200px) {
    height: 240px;
  }

  @media screen and (max-width: 768px) {
    height: auto;
    width: 100%;
    border-radius: 0;
  }
}

.about-block:not(.reverse) .img-wrapper {
  margin-left: -5rem;
  position: relative;
  opacity: 0;
  left: -5rem;
  transition: opacity 0.6s ease, left 0.6s ease;

  &.revealed {
    opacity: 1;
    left: 0;
  }

  @media screen and (max-width: 768px) {
    margin: 0;
  }
}

.about-block.reverse .img-wrapper {
  margin-right: -5rem;
  position: relative;
  opacity: 0;
  left: 5rem;
  transition: opacity 0.6s ease, left 0.6s ease;

  &.revealed {
    opacity: 1;
    left: 0;
  }

  @media screen and (max-width: 768px) {
    margin: 0;
  }
}

.about-block .about-content {
  padding-inline: min(6svh, 8svw);
  color: var(--text-color-light);

  @media screen and (max-width: 768px) {
    padding: var(--spacing-md);
    margin-top: -8rem;
    margin-inline: clamp(1rem, 5svw, 4rem);
    /* background-color: #fff; */
    box-shadow: 0 0.5rem 2rem hsl(from var(--primary-color) h s l / 0.15);
    border-radius: var(--radius-md);
    backdrop-filter: blur(4px);
    color: var(--text-color);

    background-image: radial-gradient(
      circle at 50% 125%,
      hsl(from var(--accent-color) h s l / 0.05) 0.5px,
      var(--white)
    );
  }
}

.about-block .about-title {
  margin-bottom: var(--spacing-xs);
  /* color: #000; */
  color: var(--text-color);
  font-size: clamp(1.25rem, 5svw, 2rem);
  font-weight: 700;
  margin-bottom: var(--spacing-md);
}

.about-block .about-body {
  /* color: var(--text-color-light); */
  font-size: clamp(0.85rem, 2vw, 1rem);
  line-height: 1.618;

  p:not(:last-child) {
    margin-bottom: 1rem;
  }
}