:root {
  --ws-dark-blue: #0072B6;
  --ws-light-blue: #609ED2;
  --ws-purple: #262B65;
  --ws-grey: #d1d3d4;
}


.ws-panel-item {
  background-color: #fff;
  border-radius: 0.5rem;
  box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.25);
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ws-panel-item.has-background {
  background-size: contain;
  justify-content: end;
}

.ws-panel-image img {
  max-width: 100%;
}

.ws-panel-item .ws-panel-body {
  padding: 1.5rem;
  background-color: #fff;
  width: 100%;
}

.ws-panel-item.has-background .ws-panel-body {
  /* min-height: 55%; */
  min-height: 330px;
}

.ws-panel-item .ws-panel-title {
  margin-bottom: 1rem;
}

.ws-panel-item.align-center {
  text-align: center;
}

.ws-button,
.ws-panel-item .ws-panel-button {
  color:var(--ws-purple);
  border:solid 1px var(--ws-purple);
  border-radius: 5rem;
  line-height: 1;
  display: inline-block;
  padding: 1rem 1.25rem;
  font-weight: 600;
}

.ws-panel-item .ws-panel-button {
  margin-top: 1rem;
}

.ws-panel-item .ws-panel-body .ws-panel-content {
  line-height: 1.4;
}

.ws-grid {
  display: grid;
  grid-gap: 1rem;
}

@media screen and (max-width: 767px) {
  .ws-panel-item.has-background {
    padding-top: 200px;
    background-position: center top;
  }
}

@media screen and (min-width: 768px) {

  .ws-panel-item .ws-panel-body {
    padding: 2rem;
  }

  .ws-panel-item .ws-panel-button {
    margin-top:2rem;
  }

  .ws-button:hover,
  .ws-panel-item .ws-panel-button:hover {
    color:#fff;
    background-color: var(--ws-purple);
    
  }

  .ws-grid {
    grid-gap: 2rem;
  }

  .ws-panel-item.has-background {
    /* aspect-ratio: 3/4; */
    padding-top:50%;
  }

}

@media screen and (min-width: 1200px) {
  .col-2-desktop .ws-panel-item.has-background {
    /* aspect-ratio: 4/3; */
  }
}