.gallery-content{
    text-align: center;
    margin: 5%;
    color: rgb(11, 2, 95);
    background: ghostwhite;
    }
    .underline{
      text-decoration: underline;
    }
    .gallery-content h1{
      font-size: 22px !important;
      font-weight: 500;
      }
    .gallery-container {
      width: 80%;
      margin: 10% auto;
      margin-top: 0%;
    }

    .gallery-cards {
      display: grid;
      grid-template-columns: auto auto auto auto;
    }

    .card {
      width: 230px;
      height: 250px;
    }

    .card .image {
      width: 100%;
      height: 100%;
    }

    .card .image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .card .details {
      position: absolute;
      top: 0;
      left: 0;
      width: 70%;
      height: 100%;
      background: #e67e07;
      transition: .5s;
      transform-origin: left;
      transform: perspective(2000px) rotateY(-90deg);
      margin: 0;
    }

    .card:hover .details {
      transform: perspective(2000px) rotateY(0deg);
    }

    .card .details .center {
      /* padding: 20px; */
      padding: 5px;
      text-align: center;
      background: #ffff;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }

    .card .details .center h1 {
      margin: 0;
      padding: 0;
      color: #ff3636;
      line-height: 20px;
      font-size: 20px;
      text-transform: uppercase;
    }

    .card .details .center h1 span {
      font-size: 14px;
      color: #262626;
    }

    .card .details .center p {
      margin: 10px 0;
      padding: 0;
      color: #262626;
    }

    .card .details .center ul {
      margin: 10px auto 0;
      padding: 0;
      display: table;
    }

    .card .details .center ul li {
      list-style: none;
      margin: 0 5px;
      float: left;
    }

    .card .details .center ul li a {
      display: block;
      background: #262626;
      color: #fff;
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      transform: .5s;
    }

    .card .details .center ul li a:hover {
      background: #ff3636;
    }
    @media (min-width: 320px) and (max-width: 480px) {
      .gallery-content{
        text-align: center;
        margin: 8%;
        color: rgb(11, 2, 95);
        background: ghostwhite;
        }
        .gallery-content h1{
          font-size: 20px !important;
          font-weight: 500;
          }
        .underline{
          text-decoration: underline;
        }
        .gallery-container {
          width: fit-content;
        }
    
        .gallery-cards {
          grid: none;
          width: fit-content;
          height: fit-content;
        }
    
        .card {
          width: 230px;
          height: 250px;
        }
    
        .card .image {
          width: 100%;
          height: 100%;
        }
    
        .card .image img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
    
        .card .details {
          position: absolute;
          top: 0;
          left: 0;
          width: 70%;
          height: 100%;
          background: #e67e07;
          transition: .5s;
          transform-origin: left;
          transform: perspective(2000px) rotateY(-90deg);
          margin: 0;
        }
    
        .card:hover .details {
          transform: perspective(2000px) rotateY(0deg);
        }
    
        .card .details .center {
          /* padding: 20px; */
          padding:5px;
          text-align: center;
          background: #ffff;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
        }
    
        .card .details .center h1 {
          margin: 0;
          padding: 0;
          color: #ff3636;
          line-height: 20px;
          font-size: 20px;
          text-transform: uppercase;
        }
    
        .card .details .center h1 span {
          font-size: 14px;
          color: #262626;
        }
    
        .card .details .center p {
          margin: 10px 0;
          padding: 0;
          color: #262626;
        }
    
        .card .details .center ul {
          margin: 10px auto 0;
          padding: 0;
          display: table;
        }
    
        .card .details .center ul li {
          list-style: none;
          margin: 0 5px;
          float: left;
        }
    
        .card .details .center ul li a {
          display: block;
          background: #262626;
          color: #fff;
          width: 30px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          transform: .5s;
        }
    
        .card .details .center ul li a:hover {
          background: #ff3636;
        }
    }
    @media (min-width: 481px) and (max-width: 768px) {
      .gallery-content{
        text-align: center;
        margin: 5%;
        color: rgb(11, 2, 95);
        background: ghostwhite;
        }
        .underline{
          text-decoration: underline;
        }
        .gallery-content h1{
          font-size: 20px !important;
          font-weight: 500;
          }
        .gallery-container {
          width: fit-content;
        }
    
        .gallery-cards {
          grid: none;
          width: fit-content;
          height: fit-content;
        }
    
        .card {
          width: 230px;
          height: 250px;
        }
    
        .card .image {
          width: 100%;
          height: 100%;
        }
    
        .card .image img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
    
        .card .details {
          position: absolute;
          top: 0;
          left: 0;
          width: 70%;
          height: 100%;
          background: #e67e07;
          transition: .5s;
          transform-origin: left;
          transform: perspective(2000px) rotateY(-90deg);
          margin: 0;
        }
    
        .card:hover .details {
          transform: perspective(2000px) rotateY(0deg);
        }
    
        .card .details .center {
          /* padding: 20px; */
          padding: 10px;
          text-align: center;
          background: #ffff;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
        }
    
        .card .details .center h1 {
          margin: 0;
          padding: 0;
          color: #ff3636;
          line-height: 20px;
          font-size: 20px;
          text-transform: uppercase;
        }
    
        .card .details .center h1 span {
          font-size: 14px;
          color: #262626;
        }
    
        .card .details .center p {
          margin: 10px 0;
          padding: 0;
          color: #262626;
        }
    
        .card .details .center ul {
          margin: 10px auto 0;
          padding: 0;
          display: table;
        }
    
        .card .details .center ul li {
          list-style: none;
          margin: 0 5px;
          float: left;
        }
    
        .card .details .center ul li a {
          display: block;
          background: #262626;
          color: #fff;
          width: 30px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          transform: .5s;
        }
    
        .card .details .center ul li a:hover {
          background: #ff3636;
        }
    }
    @media (min-width: 769px) and (max-width: 1024px) {
      .gallery-content{
        text-align: center;
        margin: 5%;
        color: rgb(11, 2, 95);
        background: ghostwhite;
        }
        .underline{
          text-decoration: underline;
        }
        .gallery-content h1{
          font-size: 20px !important;
          font-weight: 500;
          }
        .gallery-container {
          width: fit-content;
          margin: 10% auto;
          margin-top:0%;
        }
    
        .gallery-cards {
          display: grid;
          grid-template-columns: auto auto auto;
          margin:-2%;
        }
    
        .card {
          width: 230px;
          height: 250px;
        }
    
        .card .image {
          width: 100%;
          height: 100%;
        }
    
        .card .image img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
    
        .card .details {
          position: absolute;
          top: 0;
          left: 0;
          width: 70%;
          height: 100%;
          background: #e67e07;
          transition: .5s;
          transform-origin: left;
          transform: perspective(2000px) rotateY(-90deg);
          margin: 0;
        }
    
        .card:hover .details {
          transform: perspective(2000px) rotateY(0deg);
        }
    
        .card .details .center {
          padding: 5px; 
          text-align: center;
          background: #ffff;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
        }
    
        .card .details .center h1 {
          margin: 0;
          padding: 0;
          color: #ff3636;
          line-height: 20px;
          font-size: 20px;
          text-transform: uppercase;
        }
    
        .card .details .center h1 span {
          font-size: 14px;
          color: #262626;
        }
    
        .card .details .center p {
          margin: 10px 0;
          padding: 0;
          color: #262626;
        }
    
        .card .details .center ul {
          margin: 10px auto 0;
          padding: 0;
          display: table;
        }
    
        .card .details .center ul li {
          list-style: none;
          margin: 0 5px;
          float: left;
        }
    
        .card .details .center ul li a {
          display: block;
          background: #262626;
          color: #fff;
          width: 30px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          transform: .5s;
        }
    
        .card .details .center ul li a:hover {
          background: #ff3636;
        }
      }
    @media (min-width: 1025px) and (max-width: 1200px) {
      .gallery-content{
        text-align: center;
        margin: 5%;
        color: rgb(11, 2, 95);
        background: ghostwhite;
        }
        .underline{
          text-decoration: underline;
        }
        .gallery-content h1{
          font-size: 20px !important;
          font-weight: 500;
          }
        .gallery-container {
          width: fit-content;
          margin: 10% auto;
          margin-top:0%;
        }
    
        .gallery-cards {
          display: grid;
          grid-template-columns: auto auto auto auto;
          margin:-2%;
        }
    
        .card {
          width: 230px;
          height: 250px;
        }
    
        .card .image {
          width: 100%;
          height: 100%;
        }
    
        .card .image img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
    
        .card .details {
          position: absolute;
          top: 0;
          left: 0;
          width: 70%;
          height: 100%;
          background: #e67e07;
          transition: .5s;
          transform-origin: left;
          transform: perspective(2000px) rotateY(-90deg);
          margin: 0;
        }
    
        .card:hover .details {
          transform: perspective(2000px) rotateY(0deg);
        }
    
        .card .details .center {
          padding: 5px; 
          text-align: center;
          background: #ffff;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
        }
    
        .card .details .center h1 {
          margin: 0;
          padding: 0;
          color: #ff3636;
          line-height: 20px;
          font-size: 20px;
          text-transform: uppercase;
        }
    
        .card .details .center h1 span {
          font-size: 14px;
          color: #262626;
        }
    
        .card .details .center p {
          margin: 10px 0;
          padding: 0;
          color: #262626;
        }
    
        .card .details .center ul {
          margin: 10px auto 0;
          padding: 0;
          display: table;
        }
    
        .card .details .center ul li {
          list-style: none;
          margin: 0 5px;
          float: left;
        }
    
        .card .details .center ul li a {
          display: block;
          background: #262626;
          color: #fff;
          width: 30px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          transform: .5s;
        }
    
        .card .details .center ul li a:hover {
          background: #ff3636;
        }
    }