/* videos.css */

#video--list
.video_list--sect {}
  .sect--wrap {}
    .video--items {}
      .video--item {}
        .video--item_wrap{}
          .video--row {}
          .video--col {}
            .video--item_link {}
              .video--item_vid {}

          .video--row {}
            .video--item_info{}
              .video--item_info_link{}
                .video--item_info_h3 {}


#video--list .sect--wrap {margin: 0 30px;}

#video--list article{
-ms-break-inside: avoid;
    -webkit-break-inside: avoid;
    break-inside: avoid;
}

.vid--nav {
    margin: 42px 0;
}

.vid_nav--list {
    display: block;
    text-align: center;
}
.vid_nav--list li {
    display: inline-block;
    padding: 5px 0;
    margin: 5px 20px;
}


[class*="--col"] {
  /* display: inline-block;
  float: left; */
}

[class*="--row"] {
  /* display: table; */
}



#video--list {
  --items-per-row:1
}


@media screen and (min-width:36em){
/* 576px */
  #video--list {
    --items-per-row:2
  }

}

@media screen and (min-width:48em){
/* 768px */
  #video--list {
    --items-per-row:3;
  }

}


#video--list [class*="--items"]
#video--list .video--items {
  display:flex;
  align-items:flex-start;
  flex-wrap:wrap;
  max-width: 100vw;
  margin: 0;
  width: calc(100%);
}

/* [class*="--items"] > [class*="--item"], */
#video--list [class|="--item"],
#video--list .video--item {
    float: left;
    /* width:calc(100vw  - 60px); */
    width:calc(100%);
}

@media screen and (min-width:48rem){
  #video--list > [class|="--item"],
  #video--list .video--item {
    width: calc(var(--actual-100w) / var(--items-per-row) - 20px);
    margin-bottom: 30px;
    margin-left: 30px;
    padding: 0;
  }
  /* [class*="--items"] > [class*="--item"]:nth-last-of-type(4n+1), */
  #video--list > [class|="--item"]:nth-of-type(3n+1),
  #video--list .video--item:nth-of-type(3n+1)  {
    margin-left: 0;
    padding-left: 0px;
  }
}

.video--vid_wrap {
  background-color: #f2f2f2;
}

.video--item_vid {
  object-fit: cover;
  /* .aspect-ratio--object */
  /* position: absolute; */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video--row {}

.video--item_info{
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    height: 70px;
    overflow: hidden;
}

.video--item_info_link {
  color: #212b36;
}

.video--item_info_h3 {
  color: #212b36;
  margin: 0;
  font-size: 18px;
  line-height: 1.4;
}



/* ----------------------------------- */
/* ----------------------------------- */

@media screen and (min-width:80rem){


}
/* ----------------------------------- */