.container-inner .ul-gallery {
  max-width: 86rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap; }
  @media only screen and (max-width: 767px) {
    .container-inner .ul-gallery {
      padding: 0 .5rem; } }
  .container-inner .ul-gallery li {
    width: calc(100% / 3 - 2rem);
    margin: 1rem; }
    @media only screen and (max-width: 767px) {
      .container-inner .ul-gallery li {
        width: 50%;
        margin: 0;
        padding: .7rem; } }
    .container-inner .ul-gallery li a {
      position: relative; }
      .container-inner .ul-gallery li a:before {
        width: 2.8rem;
        height: 2.8rem;
        font-size: 1.8rem;
        border-radius: 50%;
        background: #fff;
        color: #e50065;
        font-family: "material icons round", cursive;
        content: "\e037";
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        left: 50%;
        top: 50%;
        margin: -1.4rem 0 0 -1.4rem; }
      .container-inner .ul-gallery li a:after {
        width: 100%;
        height: 100%;
        font-family: "Fredoka", sans-serif;
        content: "Watch this MOVIE!!";
        color: #fff;
        position: absolute;
        left: 0%;
        top: 0%;
        padding-top: 4rem;
        display: flex;
        justify-content: center;
        align-items: center; }
        @media only screen and (max-width: 767px) {
          .container-inner .ul-gallery li a:after {
            font-size: 1.2rem;
            padding-top: 2.5rem; } }
      .container-inner .ul-gallery li a:hover:before {
        color: #fff;
        background: #e50065; }
    .container-inner .ul-gallery li img {
      border-radius: 1rem;
      border: 0.3rem solid #00459b; }
    .container-inner .ul-gallery li:nth-of-type(2n+1) img {
      border-color: #e50065; }
    .container-inner .ul-gallery li:nth-of-type(6n+1) img {
      border-color: #57b52f; }