/* O nas */
.about-img::after {
  background-color: rgba(28, 32, 24, 0.758);
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, var(--about-grid-width));
  justify-content: center;
  gap: 0.5rem;
}

.about-grid p {
  display: flex;
  justify-content: center;
  align-items: center;
  inline-size: var(--about-grid-width);
  padding: 1rem;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--color-brunata-blue) 0%, var(--color-blue) 100%);
  color: white;
  text-align: center;
  font-size: 1.2rem;
}

.about-grid p:nth-child(3),
.about-grid p:nth-child(7) {
  background: linear-gradient(135deg, var(--color-logo-red2) 0%, #8b1528 100%);
}

.grid-img {
  inline-size: var(--about-grid-width);
  aspect-ratio: 1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  clip-path: shape(from 80.23% 70.61%,curve to 74.26% 82.14% with 77.25% 75.59%,curve to 65.02% 92.33% with 71.27% 88.69%,curve to 52.33% 89.25% with 58.77% 95.98%,curve to 39.77% 83.64% with 45.89% 82.52%,curve to 26.83% 83.35% with 33.65% 84.75%,curve to 13.53% 77.77% with 20.01% 81.94%,curve to 12.55% 64.85% with 7.06% 73.61%,curve to 9.54% 49.96% with 18.04% 56.10%,curve to 6.86% 38.13% with 1.04% 43.82%,curve to 20.23% 30.79% with 12.68% 32.44%,curve to 30.64% 24.56% with 27.79% 29.14%,curve to 38.31% 16.97% with 33.50% 19.98%,curve to 49.19% 11.14% with 43.12% 13.95%,curve to 61.61% 10.09% with 55.26% 8.33%,curve to 70.93% 18.20% with 67.95% 11.85%,curve to 79.26% 27.76% with 73.90% 24.55%,curve to 90.46% 36.07% with 84.62% 30.97%,curve to 94.79% 48.32% with 96.31% 41.17%,curve to 88.24% 60.55% with 93.27% 55.47%,curve to 80.23% 70.61% with 83.21% 65.63%);
}

.about-grid,
.about-grid p,
.grid-img {
  max-inline-size: 100%;
  min-inline-size: 0;
}

@media screen and (width < 1200px)  and (width >= 734px) {
  
  .about-grid p,
  .about-grid .grid-img {
    inline-size: 100%;
  }

  .about-grid > :last-child {
    grid-column: span 2;
  }

  .about-grid p {
    border-top-left-radius: 20%;
  }
  .grid-img {
    clip-path: none;
    border-bottom-right-radius: 20%;
  }
}

@media screen and (width < 734px) {
  .about-grid {
    grid-template-columns: 1fr;
  }

  .about-grid .grid-img,
  .about-grid p {
    inline-size: 100%;
    min-block-size: var(--about-grid-width-mobile);
    margin-inline: auto;
  }
}