.icon_plus {
    color: red;
    margin: auto;
    font-size: 30px;
}

.add_board_card {
    width: 16rem;
    height: 10rem;
    background-color: #f1f0f0;
}

.margin_top_20 {
    margin-top: 20px;
}

.board_title {
    background-color: white;
    margin-top: 2px;
    color: gray;
}



*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
    /*   font-size: 62.5%;  */
}

body {
    color: #333;
    /*   font-weight: 300; */
    /*   line-height: 1.6;  */
}

/* .container {
/*   width: 60%; */
/*   margin: 2rem auto;  */
/* }  */
.card {
    width: 100%;
    height: 100%;
    /*   background:red; */
}

.gallery {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(4, 3.22vw);
    grid-auto-rows: minmax(207px, auto);
    /*     grid-auto-rows: minmax(3vw, auto); */
    grid-gap: 3px;
    width: 100%;
    height: 100%;
}

.gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery__item {
    width: 100%;
    height: 100%;
}


.gallery2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* grid-template-rows: repeat(4, 3.22vw); */
    grid-auto-rows: minmax(100%, 13.22vw);
    grid-gap: 3px;
    width: 100%;
    height: 100%;
}
.gallery2__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery2__item {
    width: 100%;
    height: 100%;
}

.gallery1 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-auto-rows: minmax(100%, 13.22vw);
    width: 100%;
    height: 100%;
}

.gallery1__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery1__item {
    width: 100%;
    height: 100%;
}

.gallery__item--1 {
    /*   grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3; */
    grid-column: 1 / span 3;
    grid-row: 1 / span 2;
    /** Alternative Syntax **/
    /* grid-column: 1 / span 2;  */
    /* grid-row: 1 / span 2; */
}

.gallery__item--2 {
    /*   grid-column-start: 3;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 3; */
    grid-column: 4 / span 2;
    grid-row: 1 / span 4;
    /** Alternative Syntax **/
    /* grid-column: 3 / span 2;  */
    /* grid-row: 1 / span 2; */
}

.gallery__item--3 {
    /*   grid-column-start: 5;
  grid-column-end: 9;
  grid-row-start: 1;
  grid-row-end: 6; */
    grid-column: 6 / -1;
    grid-row: 1 / span 2;
    /** Alternative Syntax **/
    /* grid-column: 5 / span 4;
  grid-row: 1 / span 5; */
}

.gallery__item--4 {
    /*   grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 3;
  grid-row-end: 6; */
    grid-column: 1 / span 3;
    grid-row: 3 / -1;
    /** Alternative Syntax **/
    /* grid-column: 1 / span 4;  */
    /* grid-row: 3 / span 3; */
}

.gallery__item--5 {
    /*   grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 6;
  grid-row-end: 9; */
    grid-column: 6 / span 3;
    grid-row: 3 / -1;
    /** Alternative Syntax **/
    /* grid-column: 1 / span 4; */
    /* grid-row: 6 / span 3; */
}

.gallery__item--6 {
    /*   grid-column-start: 5;
  grid-column-end: 9;
  grid-row-start: 6;
  grid-row-end: 9; */
    grid-column: 6 / -1;
    grid-row: 3 / -1;
    /** Alternative Syntax **/
    /* grid-column: 5 / span 4; */
    /* grid-row: 6 / span 3; */
}

/* For boards two images */
.gallery__item--1-21 img {
    grid-column: 1 / span 4;
    grid-row: 1 / span 4;
}

.gallery__item--2-22 img {
    grid-column: 5 / span 5;
    grid-row: 1 / span 4;
}

/* For boards with 1 image*/
.gallery__item--1-11 img {
    border-radius: 10px;
    border: 1px solid #cecece !important;
}

/*For boards with 4 images*/
.gallery__item--1-41 {
    grid-column: 1 / span 4;
    grid-row: 1 / span 2;
    
}
.gallery__item--2-42 {
    grid-column: 5 / -1;
    grid-row: 1 / span 2;
}
.gallery__item--3-43 {
    grid-column: 1 / span 4;
    grid-row: 3 / -1;
  
}

.gallery__item--4-44 {
    grid-column: 5 / span 4;
    grid-row: 3 / -1;
    
}
.btnres {
    background: #efefef;
    width: 100%;
    border-radius: 10px;
    border: 1px solid #cecece !important;
}