/* TITLE */
article.title {
  color: white;
  display: inline-block;
  margin: 2.5rem 0;
}

.setups-img-header {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 24px;
    grid-row-gap: 1px;
    height: 300px;
  }
  .setups-img-head-1 {
    background-image: url("../img/setup_photo2-0d5731b935a023312555f8f37246e90d.jpg");
    background-position: center 20%;
    background-repeat: no-repeat;
    background-size: cover;
    border: var(--xds-bordercolor);
    border-radius: calc(var(--xds-borderradius) +  var(--xds-padding));
    grid-area: 1 / 1 / 2 / 2; 
  }
  .setups-img-head-2 {
    background-image: url("../img/setup_photo1-db82f85797da3dfce74fa663ffe28d02.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: var(--xds-bordercolor);
    border-radius: calc(var(--xds-borderradius) +  var(--xds-padding));
    grid-area: 1 / 2 / 2 / 3;
  }
  .setups-img-head-3 {
    background-image: url("../img/setup_photo3-8c949caf7f9356fa6508898f566b6abd.jpg");
    background-position: center 50%;
    background-repeat: no-repeat;
    background-size: cover;
    border: var(--xds-bordercolor);
    border-radius: calc(var(--xds-borderradius) +  var(--xds-padding));
    grid-area: 1 / 3 / 2 / 4;
  }
  
  section.setups-container {
    margin-top: 20px;
  }
  
  .setups-grid h1 {
    font-family: "CaustenRound Black";
    font-size: calc(0.75em + 2vmin);
    left: 2vw;    
    padding: 50px 0 25px 0;
    position: relative;
    text-transform: uppercase;
    color: white;
  }
  
  /* SETUPs BOX */
  .box-setups {
    background-color: #1e1e1e;
    transition: background-color 1s ease 0ms;
  }
  
  /* .box-setups:hover {
    background-color: #252525;
    transition: background-color 1s ease 0ms;
  } */
  
  .box-setups .box-text {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
  }
  
  .box-setups .box-inter-text {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .box-setups .box-text img {
     height: 180px;
  }
  
  .box-text-setups {
    position: absolute;
    bottom: 20px;
    line-height: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .box-setups .box-text-setups span:nth-child(1) {
    text-align: center;
    font-size: var(--fontSize-box-spanSetups);
    font-family: "CaustenRound Bold";
  }
  .box-setups .box-text-setups span:nth-child(2) {
    text-align: center;
    font-size: var(--fontSize-box-spanSetupsName);
    font-family: "CaustenRound Regular";
  }
  
  
  /* GRIDBOX */
  .setups-grid-container {
      display: flex;
      flex-direction: column;
      width: 100%;
      flex: 0.5 1 0;
  }
  
  .setups-gridbox {
      grid-template-columns: repeat(auto-fill, 15em);
      grid-auto-rows: 15em;
      grid-auto-flow: row dense;
      display: grid;
      grid-gap: 24px;
      gap: 24px;
      justify-content: center;
      /*padding:0 24px;*/
      width: 100% 
  }
  
  .setups-grid {
      padding: 25px 0;
  }
  
  .s {
      border-radius: 25px;
      border: 1px solid #ffffff30;
      display: block;
      position: relative;
      box-shadow: inset 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
      overflow: hidden;
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1);
      transition: all .9s ease;
  }
  
  .s:hover {
      -webkit-transform: scale(1.1);
      -moz-transform: scale(1.1);
      -o-transform: scale(1.1);
      transform: scale(1.1);
      z-index: 2;
      transition: all .9s ease;
  }
  
  .s {
    grid-column-end: span 1;
    grid-row-end: span 1;
  }
  
  .box-inter-text {
    color: white;
  }
  
  
  /* MOBILE */
  
  @media screen and (max-width: 650px) and (orientation: portrait) {
    .setups-gridbox {
        grid-template-columns: repeat(auto-fill, 9em);
        grid-auto-rows: 9em;
    }
    
    .box-setups .box-text img {
       height: 100px;
    }
  
    .box-text-setups {
      position: absolute;
      bottom: -5px;
      line-height: 20px;
    }
  
    .box-setups .box-text-setups span:nth-child(1) {
      font-size: calc(var(--fontSize-box-spanSetups) -2px);
    }
    .box-setups .box-text-setups span:nth-child(2) {
      font-size: calc(var(--fontSize-box-spanSetupsName) -2px);
    }
  
    .setups-img-head-1, .setups-img-head-3 {
      display: none;
    }
    .setups-img-header {
     display: grid;
     grid-template-columns: max-content;
     grid-template-rows: 1fr;
     grid-column-gap: 0;
     grid-row-gap: 0;
     height: 300px;
   }
  }
  
  @media (max-width: 950px) and (orientation: landscape) {
    .setups-gridbox {
        grid-template-columns: repeat(auto-fill, 8em);
        grid-auto-rows: 8em;
    }
    .box-setups .box-text img {
       height: 100px;
    }
  
    .box-text-setups {
      position: absolute;
      bottom: -5px;
      line-height: 20px;
    }
  
    .box-setups .box-text-setups span:nth-child(1) {
      font-size: calc(var(--fontSize-box-spanSetups) -2px);
    }
    .box-setups .box-text-setups span:nth-child(2) {
      font-size: calc(var(--fontSize-box-spanSetupsName) -2px);
    }
  
    .setups-img-head-1, .setups-img-head-3 {
      display: none;
    }

    .setups-img-header {
      grid-template-columns: max-content;
    }
  }