/* SECTION
---------------------------- */
.section-wrapper{
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    /* margin-bottom: 40px; */
    overflow-y: hidden;
    margin-bottom: 20px;
}



 /* iMAGE
---------------------------- */

.section-wrapper figure {
    display: flex;
    width: 100%;
    height: 100%;
}

.section-wrapper figure img {
    display: flex;
    width: 100%;
    height: 600px;

     object-fit: cover;
	object-position: center;
    align-content: center;;
}

.section-wrapper #image-cover {
    position: absolute;
    background-color: rgba(250, 247, 247, 0.35);
    /* background-color: red; */
    height: 600px;
    width: 100%;
    z-index: 10;
     backdrop-filter: blur(2px);
      transition: 150ms ease-in;
}

.section-wrapper:hover #image-cover {
     background-color: rgba(15, 10, 10, 0);
     backdrop-filter: blur(0px);
}


/* CIRCLE WRAPPER
---------------------------- */
.circle-wrapper {
    position: absolute;
    display: flex;
    flex-direction:column;
    align-items: center;
    left: 40px;
      z-index: 100;
}

 .circle-wrapper #name {
    background-color: rgb(232 82 23);
    color: white;
    height: 200px;
    width: 200px;
    border-radius: 130px;
    padding: 10px;
 }

 .circle-wrapper #category {
    background-color: rgb(82 184 200);
    color: white;
    height: 140px;
    width: 140px;
    border-radius: 90px;
    margin-top: 40px;
    padding: 10px;
 }

 .circle-wrapper #category, .circle-wrapper #name {
    position: relative;
    align-content: center; /* horizontal */
    align-items: center; /* vertical */
    text-align: center;
    transition: 150ms ease-in;
 }

 .circle-wrapper h2 {
    font: 400 26px/1.0 "Contralto-Small", serif;
    transition: 150ms ease-in;
 }

 .circle-wrapper p {
    font: 400 16px/1.2 "Inter", sans-serif;
    transition: 150ms ease-in;
 }

.section-wrapper:hover .circle-wrapper #name {
    height: 220px;
    width: 220px;
}

.section-wrapper:hover .circle-wrapper h2 {
 font: 400 30px/1.0 "Contralto-Small", serif;
}

.section-wrapper:hover .circle-wrapper p {
 font: 400 18px/1.2 "Inter", sans-serif;
}

.section-wrapper:hover .circle-wrapper #category {
    height: 160px;
    width: 160px;
    margin-top: 10px;
}





/* Media Queries
--------------- */

 @media (max-width: 600px) {

    .circle-wrapper {
    flex-direction:row;
    left: 20px;
    margin-top: 350px;
    }

    .circle-wrapper #name {
    height: 150px;
    width: 150px;
    border-radius: 130px;
    padding: 10px;
    margin-right: 10px;
 }

 .circle-wrapper #category {
    height: 120px;
    width: 120px;
    border-radius: 90px;
    margin-top: 0px;
    padding: 10px;
 }

 .section-wrapper #image-cover {
    display: none;
}




.section-wrapper:hover .circle-wrapper #name {
    height: 150px;
    width: 150px;
}

.section-wrapper:hover .circle-wrapper h2 {
 font: 400 26px/1.0 "Contralto-Small", serif;
}

.section-wrapper:hover .circle-wrapper p {
 font: 400 16px/1.2 "Inter", sans-serif;
}

.section-wrapper:hover .circle-wrapper #category {
     height: 120px;
    width: 120px;
    margin-top: 0px;
}


 }