.sryBoxContent {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: row;
   flex-wrap: wrap;
   position: relative;
   margin-top: 50px;
   margin-bottom: 20px;
   z-index: -10;
}
.sryBoxContent .card {
   position: relative;
   min-width: 600px;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   margin: 30px 20px 30px 10px;
}
.sryBoxContent .card:nth-child(1) {
   margin-top: 0;
}
.sryBoxContent .card:nth-child(odd) {
   flex-direction: row;
}
.sryBoxContent .card:nth-child(even) {
   flex-direction: row-reverse;
}
.sryBoxContent .card .imgBx {
   width: 350px;
   height: 300px;
   position: relative;
   left: 25px;
   z-index: 1;
}
.sryBoxContent .card:nth-child(even) .imgBx {
   left: -25px;
}
.sryBoxContent .card .imgBx img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}
.sryBoxContent .card .contentBx {
   position: relative;
   right: 0px;
   width: 350px;
   height: 300px;
   background: var(--black);
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 20px 0 20px 40px;
}
.sryBoxContent .card:nth-child(even) .contentBx {
   right: -25px;
   padding: 20px 40px 20px 20px;
}
.sryBoxContent .card .contentBx:before {
   content: '';
   position: absolute;
   top: -25px;
   bottom: -25px;
   left: 0;
   right: 0;
   background: var(--black);
   z-index: -1;
}
.sryBoxContent .card .contentBx .content {
   overflow: hidden;
}
.sryBoxContent .card .contentBx .content h2 {
   font-size: 30px;
   color: var(--white);
   overflow: hidden;
   white-space: nowrap;
}
.sryBoxContent .card .contentBx .content p {
   margin-top: 10px;
   padding-right: 5px;
   color: var(--white);
   height: 170px;
   overflow: hidden;
}
.sryBoxContent .card .contentBx a {
   display: inline-block;
   margin-top: 15px;
   color: var(--white);
   text-decoration: none;
   padding: 10px;
   border: 1px solid var(--white);
}

@media (max-width: 1100px) {
   .sryBoxContent .card {
      flex-direction: column;
      max-width: 350px;
      min-width: 0;
      margin: 25px 25px;
   }
   .sryBoxContent .card:nth-child(1) {
      margin-top: 0;
   }
   .sryBoxContent .card .imgBx {
      width: 100%;
      height: 250px;
      left: 0;
   }
   .sryBoxContent .card .contentBx {
      width: 100%;
      height: auto;
      right: 0;
      padding: 30px;
      text-align: center;
   }
   .sryBoxContent .card .contentBx:before {
      top: 0;
      bottom: 0;
   }
   .sryBoxContent .card:nth-child(even) .imgBx {
      left: 0;
   }
   .sryBoxContent .card:nth-child(even) .contentBx {
      right: 0;
      padding: 30px;
   }
}