.to-blogcase {
  position: relative;
  padding: 64px 20px 128px 20px;
  text-align: center;
}

.to-blogcase[data-mode="0"] {
  background: var(--color-back-light);
  color: var(--color-text-dark);
}

.to-blogcase[data-mode="1"] {
  background: var(--color-back-dark);
  color: var(--color-text-light);
}


.to-blogcase-in {
  position: relative;
  align-items: center;
  justify-content: center;
  color: inherit;
  width:				100%;
	max-width: 		1400px;
	margin: 			0px auto;
}

.to-blogcase-in h1{
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  text-align: center;
  color: inherit;
  font-weight: normal;
  margin-bottom: 24px;
}

.to-blogcase-in h2{
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  text-align: center;
  color: inherit;
  font-weight: bold;
  margin-bottom: 32px;
}

.to-blogcase-in p{
  margin-bottom: 32px;
}

.to-blogcase-in > div{
  display: flex;
  justify-content: center; 
  align-items: stretch;     
  gap: 20px;                 
  width: 100%;
  flex-direction: row;
}

.to-blogcase-in > div > a{
  flex: 1;
  background: #ffffff;
  padding: 20px 20px;
  border-radius: 10px;
  border: 1px solid #ca8f29;
  text-decoration: none;
  color: var(--color-text-dark);
  transition: background 0.5s ease;
}

.to-blogcase-in > div > a:hover{
  background: #ca8f29;
  color: #ffffff;
  border: 1px solid var(--color-back-dark);
  box-shadow: 0px 0px 10px 12px #ca8f2932;
    -webkit-box-shadow: 0px 0px 10px 12px #ca8f2932;
    -moz-box-shadow: 0px 0px 10px 12px #ca8f2932;
    border: 1px solid #ca8f29;
}

.to-blogcase-in > div > a:hover h3{
  color: #ffffff;
}


.to-blogcase-in h3{
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  text-align: left;
  color: #444444;
  font-weight: normal;
  margin-bottom: 20px;
  text-align: center;
  font-family: 'exo_2bold',Arial,Georgia,Courier;
}



@media (max-width: 1280px) {
  .to-blogcase-in > div {
    flex-wrap: wrap;              /* allow items to wrap */
    gap: 20px;                    /* replace % gap for simpler wrapping layout */
  }

  .to-blogcase-in > div > a {
    flex: 1 1 calc(50% - 20px);   /* two items per row */
  }
}


@media (max-width: 600px) {
  .to-blogcase-in > div > a {
    flex: 1 1 100%;
  }
}