/*
  general
  row
  case-study
  responsive
*/

/* general
============================================================================ */

.case-studies-container {
  display: flex;
  max-width: 1440px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pos-gap-card-card, 40px);
  margin: 0 auto;
  padding: 0 var(--pos-gap-page-content-x-margin, 40px);
}

/* row
============================================================================ */

.case-study-row {
  display: flex;
  height: 582px;
  align-items: center;
  justify-content: center;
  gap: var(--pos-gap-card-card, 40px);
  align-self: stretch;
}

/* case-study
============================================================================ */

.case-study {
  display: flex;
  max-width: 640px;
  max-height: 510px;
  padding: var(--pos-padding-cards-boxes, 40px) 0 0 var(--pos-padding-cards-boxes, 40px);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pos-gap-section-elements, 40px);
  transition: transform 0.3s ease;

  border-radius: var(--pos-corner-panel, 4px);
  border:  1px solid var(--card-border-gradient-from, #e2e8f0);
  background: linear-gradient(159deg, var(--pos-color-panel-background, #FFF) 6.27%, var(--pos-color-page-background, #F7F8FA) 66.73%);
}

.gray-scale {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.case-study:hover .gray-scale {
  filter: none;
}

.case-study:hover {
  transform: scale(1.05);
  box-shadow: 0px 10px 100px 0px rgba(58, 141, 222, 0.30);
  background:
    url(../images/marketing-landing/pictures/light_bg.avif) bottom right -70px/800px 550px no-repeat,
    linear-gradient(159deg, var(--pos-color-panel-background, #FFF) 6.27%, var(--pos-color-page-background, #F7F8FA) 66.73%);
}

/* responsive
============================================================================ */

@media screen and (max-width: 1440px) {
  .case-study-row {
    flex-direction: column;
    height: auto;
  }
}

@media screen and (max-width: 620px) {
  .case-study:hover {
    background:
      url(../images/marketing-landing/pictures/light_bg.avif) bottom right -70px/500px 350px no-repeat,
      linear-gradient(159deg, var(--pos-color-panel-background, #FFF) 6.27%, var(--pos-color-page-background, #F7F8FA) 66.73%);
  }
}