Day 343

Workin, Workin, and a-Workin...
#CodingPhase #TheCodingWay #365CodingPhaseChallenge

**********

#featured {
    padding: 10px 0 0 0;
    .videos-section {
      display: grid;
      grid-template-columns: 1fr 2fr 620px 2fr 1fr;
      grid-gap: 10px;
      .video {
        display: flex;
        justify-content: center;
        align-items: center;
        .image {
          width: 100%;
          height: 300px;
          background: url("https://i.ytimg.com/vi/yq1d_NHtwOI/maxresdefault.jpg");
          background-position: center;
          background-size: cover;
          background-repeat: no-repeat;
          cursor: pointer;
        }
      }
      .video:nth-child(1) .image,
      .video:nth-child(5) .image {
        position: relative;
        .arrow {
          height: 100%;
          position: absolute;
          background: rgba(0, 0, 0, 0.4);
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 10px;
          transition: all 0.2s ease-in-out;
          &:hover {
            background: rgba(0, 0, 0, 0.6);
          }
          .fa {
            font-size: 4rem;
            color: #00b4f0;
          }
        }
      }
      .video:nth-child(5) .image {
        .arrow {
          right: 0;
        }
      }
      .center {
        width: 100%;
        height: 349px;
        .image {
          width: 100%;
          height: 100%;
          background: url("https://i.ytimg.com/vi/GT6ushVNkGY/maxresdefault.jpg");
          transform: scale(1.02);
          background-position: center;
          background-size: cover;
          background-repeat: no-repeat;
          border: 2px solid #00b4f0;
        }
      }
    }