From 917918d74285dc55569c6fe0775e68b184c3809d Mon Sep 17 00:00:00 2001
From: Roland Schneider <rschneider@ucs.at>
Date: Wed, 27 Aug 2025 07:22:46 +0200
Subject: [PATCH] [yoga-24] our services component: make images rounded with
 css

---
 .../src/components/our.services.item.component.module.css    | 5 +++++
 yoga-app/src/components/our.services.item.component.tsx      | 3 ++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/yoga-app/src/components/our.services.item.component.module.css b/yoga-app/src/components/our.services.item.component.module.css
index 180f22f..1cd19ed 100644
--- a/yoga-app/src/components/our.services.item.component.module.css
+++ b/yoga-app/src/components/our.services.item.component.module.css
@@ -31,6 +31,11 @@
     padding-right: 0;
 }
 
+.rounded-image{
+    border-top-left-radius: 60px;
+    border-bottom-right-radius: 60px;
+}
+
 /*:global(div.slick-active):nth-last-child(n!*){*/
 /*    padding-left: 6px;*/
 /*    padding-right: 0;*!*/
diff --git a/yoga-app/src/components/our.services.item.component.tsx b/yoga-app/src/components/our.services.item.component.tsx
index d927ea4..9d07ce1 100644
--- a/yoga-app/src/components/our.services.item.component.tsx
+++ b/yoga-app/src/components/our.services.item.component.tsx
@@ -4,6 +4,7 @@ import {StrapiFile} from "@/types/types";
 import strapiApi from "@/api/strapi/strapi-api";
 import styles from './our.services.item.component.module.css'
 import Link from "next/link";
+import classNames from "classnames";
 
 export interface Props {
     config: YogaSingleService_Plain
@@ -22,7 +23,7 @@ const OurServiceItemComponent = ({config: {header,description,image,name}}: Prop
             <div className="services_box_content">
                 <div className="services_box_upper_portion">
                     <figure className="mb-0">
-                        <YogaImageComponent src={strapiApi.getImageUrl(imageFile.url)} alt="" className="img-fluid"/>
+                        <YogaImageComponent src={strapiApi.getImageUrl(imageFile.url)} alt="" className={classNames(styles.roundedImage,"img-fluid" )}/>
                     </figure>
                 </div>
                 <div className="services_box_lower_portion">