@charset "utf-8";

/* CSS Document */

.cs-list{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  }
  .cs-list_box{
    display: flex;  
    align-items: center;
    justify-content: center;
    height: 250px;
    padding-right: 15px;
    padding-left: 15px;
    border: 1px solid rgba(var(--color-VeryLightGrey),1);
    background-color: rgba(var(--color-White),1);
    position: relative;
    }
    .cs-list_name{}
      .cs-list_name span{
        --viewport-from: 476;
        --font-size-from: 18;
        --min-font-size: 18;
        --viewport-to: 1200;
        --font-size-to: 22;
        --max-font-size: 22;
        font-weight: bold;
        }
      .cs-list_name img{display: block;}
    .cs-list_badge{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 150px;
      height: 20px;
      position: absolute;
      right: 10px;
      bottom: 10px;
      }
      .mobility .cs-list_badge{background-color: rgba(var(--color-Sunflower),1);}
      .infrastructure .cs-list_badge{background-color: rgba(var(--color-Astral),1);}
      .smart-infra .cs-list_badge{background-color: rgba(var(--color-Astral),1);}
      .education .cs-list_badge{background-color: rgba(var(--color-CoralTree),1);}
      .software .cs-list_badge{background-color: rgba(var(--color-Lochinvar),1);}
      .healthcare .cs-list_badge{background-color: rgba(var(--color-BuddhaGold),1);}
      .cs-list_badge span{
        font-size: var(--fontsize-2s);
        font-weight: bold;
        color: rgba(var(--color-White),1);
        }

/* casestudypage */
.casestudypage .st-seccontents{
  padding-right: 20px;
  padding-left: 20px;
  }
  .casestudypage .cs-list{
    max-width: 1100px;
    margin: 0 auto;
    }


@media screen and (max-width: 1200px) {

.cs-list{gap: 20px;}
  .cs-list_box{height: 220px;}

}/* max-width: 1200px */

@media screen and (max-width: 992px) {

.cs-list{gap: 15px;}
  .cs-list_box{height: 200px;}


}/* max-width: 992px */

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

.cs-list{grid-template-columns: repeat(3, 1fr);}
  .tp-casestudy .cs-list_box:nth-last-of-type(-n+2){display: none;}

}/* max-width: 768px */

@media screen and (max-width: 576px) {

.cs-list{grid-template-columns: repeat(2, 1fr);}
  .cs-list_box{height: 170px;}
  .tp-casestudy .cs-list_box:nth-last-of-type(-n+4){display: none;}

}/* max-width: 576px */

@media screen and (max-width: 476px) {

.cs-list{
  grid-template-columns: 1fr;
  /* max-width: 350px; */
  margin: 0 auto;
  margin-bottom: 50px;
  }

}/* max-width: 476px */