.works-section {
   display: flex;
   flex-direction: column;
   gap: clamp(1rem, 0.4718rem + 2.2535vw, 2.5rem);
   margin-bottom: clamp(5.5rem, 4.9718rem + 2.2535vw, 7rem);
}

.works-heading {
   display: flex;
   align-items: center;
   gap: clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem);
}

.works-title {
   color: var(--main-section-title-color);
   font-family: var(--font-family-heading);
   font-size: var(--font-size-h4);
}

.works-title-divider {
   background-color: var(--header-border-color);
   width: clamp(3rem, -1.2254rem + 18.0282vw, 15rem);
   height: .5px;
}

.works-container {
   display: grid;
   gap: clamp(1rem, 0.6479rem + 1.5023vw, 2rem);
}

.works-content {
   background-color: var(--works-card-bg-color);
   border: .59px solid var(--works-border-color);
   border-radius: clamp(0.65rem, 0.5268rem + 0.5258vw, 1rem);
   display: flex;
   justify-content: space-between;
   overflow: hidden;
}

.works-content1 {
   padding: clamp(1.25rem, 0.3873rem + 3.6808vw, 3.7rem) 
            clamp(1.25rem, 0.3873rem + 3.6808vw, 3.7rem) 0 
            clamp(1.25rem, 0.3873rem + 3.6808vw, 3.7rem);
}

.works-content2 {
   padding: clamp(1.25rem, 0.3873rem + 3.6808vw, 3.7rem) 
            clamp(1.25rem, 0.9859rem + 1.1268vw, 2rem) 0 
            clamp(1.25rem, 0.3873rem + 3.6808vw, 3.7rem);
}

.works-content3 {
   padding: clamp(1.25rem, 0.3873rem + 3.6808vw, 3.7rem) 
            clamp(1.25rem, 0.9859rem + 1.1268vw, 2rem) 0 
            clamp(1.25rem, 0.3873rem + 3.6808vw, 3.7rem);
}

.works-content-text-container1,
.works-content-text-container2,
.works-content-text-container3 {
   padding-bottom: clamp(1.25rem, 0.3873rem + 3.6808vw, 3.7rem);
}

.works-content-text-container {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   gap: 1.5rem;
   max-width: 31rem;
}

.works-logo1,
.works-logo2,
.works-logo3 {
   background-image: var(--works-logo-gradient);
   border-radius: .938rem;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 1rem;
   height: 4.313rem;
   width: 4.313rem;
}

.works-logo1 p {
   background-color: #C0FF0E;
   background-clip: text;
   font-size: 1.5rem;
   font-family: var(--font-family-heading);
   font-weight: 600;
   -webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
}

.works-logo2 p {
   background-color: rgb(84, 84, 255);
   background-clip: text;
   font-size: 1.5rem;
   font-family: var(--font-family-heading);
   font-weight: 600;
   -webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
}

.works-logo3 p {
   background-color: var(--color-faint-white);
   background-clip: text;
   font-size: 1.5rem;
   font-family: var(--font-family-heading);
   font-weight: 600;
   -webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
}

.works-content-text-subtitle {
   color: var(--main-section-subtitle-color);
   font-size: var(--font-size-h5);
   font-family: var(--font-family-heading);
   margin-bottom: 1rem;
}

.works-content-text-desc {
   font-size: var(--font-size-text);
}

.works-content-text-container-btns {
   display: flex;
   align-items: center;
   gap: clamp(1.2rem, 1.0768rem + 0.5258vw, 1.55rem);
}

.works-content-text-container-btn {
   border: .59px solid var(--header-border-color);
   border-radius: var(--spacing-btn-radius);
   display: flex;
   align-items: center;
   gap: var(--spacing-btn-gap);
   font-size: clamp(0.938rem, 0.9338rem + 0.0180vw, 0.95rem);
   padding: clamp(0.57rem, 0.5242rem + 0.1953vw, 0.7rem) clamp(0.75rem, 0.6972rem + 0.2254vw, 0.9rem);
   transition: var(--global-transition);
}

.works-content-text-container-btn1,
.works-content-text-container-btn2 {
   color: var(--hero-btn2-color);
}

.works-content-text-container-btn1:is(:hover, :active),
.works-content-text-container-btn2:is(:hover, :active) {
   border: .59px solid var(--btn-hover-color);
   color: var(--hero-name-color);
}

.works-content-image1 {
   width: clamp(15rem, 13.5915rem + 6.0094vw, 19rem);
   object-fit: cover;
   pointer-events: all;
   transform: rotate(3deg);
   transition: var(--global-transition);
}

.works-content-image1:hover {
   transform: rotate(0deg) scale(1.1);
}

.works-content-image2 {
   width: clamp(19rem, 17.5915rem + 6.0094vw, 23rem);
   object-fit: cover;
   pointer-events: all;
   transition: var(--global-transition);
}

.works-content-image2:hover {
   transform: scale(1.1);
}

.works-content-image3 {
   width: clamp(15rem, 13.5915rem + 6.0094vw, 19rem);
   object-fit: cover;
   pointer-events: all;
   transform: rotate(-2.5deg);
   transition: var(--global-transition);
}

.works-content-image3:hover {
   transform: rotate(0) scale(1.1);
}


/* breakpoint 1220px media query */
@media screen and (max-width: 76.25em) {
   .works-content-text-container {
      max-width: none;
   }

   .works-content-image1,
   .works-content-image2,
   .works-content-image3 {
      display: none;
   }
}