/* CSS Flexbox */
.page{
  display: flex;
  justify-content: space-between;
}

.flex-container{
  display: flex;
  /* gap: 20px; */
  flex-direction: row;
  /* flex-wrap: wrap; */
  justify-content: center;
  border: 2px solid grey;
  padding: 20px;
  height: 400px;
  align-items: center;
  margin-bottom: 20px;
}

.page > div{
  width: 45%;
}

.flex-item{
  background-color: rgb(215, 112, 255);
  padding: 20px;
}

.flex-item{
  width: 25%;
}

.perf-center{
  display:flex;
  justify-content: center;
  align-items: center;
}
.perf-center .flex-item{
  background-image: url("img/cat.jpg");
  background-size:cover;
  width: 200px;
  height: 200px;
}

.flex-container.left{
  flex-direction: column;
}

/* CSS Grid */

.grid-container{
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 2fr 6fr 1fr;
  column-gap: 20px;
  row-gap: 10px;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  /* gap: 20px; */
}
.grid-item{
  background: skyblue;
  /* background: #aaeb87; */
  padding: 20px;
}

.grid-item:first-child{
  grid-column-start: 1;
  grid-column-end: 4
}

.grid-item:last-child{
  grid-column-start: 1;
  grid-column-end: 4;
}

.flex-group{
  display:flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.flex-group > div{
  border: 2px solid navy;
  width: 30%;
  text-align:center;
}

/* layout styles */

.layout{
  text-align:center;
  font-family: Helvetica, Arial, sans-serif;
}
.layout-wrapper{
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
.layout-wrapper header,
.layout-wrapper footer {
  height: 100px;
  background: violet;
  margin-bottom: 10px;
  padding: 20px;
}
.flex2-container{
  display:flex;
  height: 400px;
  justify-content: space-between;
  margin-bottom: 10px;
}

.flex2-container div{
  background-color: violet;
  width: 31%;
}

.text-only{
  column-count: 3;
  max-width: 980px;
  margin: 20px auto;
}