:root {
    --red-color: #EB112A;
    --gray-color: #5E5E5E;
    --btn-size: 72px;
    --btn-arrow-height: 22px;
    --gap-size: 22px;
    --title-font-size: 24px;
}

#practical-case-container {
    display: flex;
    justify-content: space-between;
    gap: var(--gap-size);
    width: 100%;
}

#practical-case-container #column-1,
#practical-case-container #column-2 {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gap-size);
    width: calc(50% - (var(--gap-size) / 2));
}

#practical-case-container .practical-case-item {
    position: relative;
	display:flex;
	flex-direction:column;
}

#practical-case-container .title-wrapper {
	height: 62px;
	display: flex;
	align-items: center;
    background-color: var(--red-color);
}

#practical-case-container .title-wrapper h3 {
	margin-left: 40px;
	font-size: var(--title-font-size);
	color: white;
	padding: 0;
	font-weight: bold;
}

#practical-case-container .image-wrapper {
    display: inline-block;
    width: 100%;
    height: auto;
	position: relative;
}

#practical-case-container .image-wrapper img {
    display: block;
    margin: 0;
    padding: 0;
    width: 100%; 
    height: auto;
}

#practical-case-container .btn {
    position: absolute;
    width: var(--btn-size);
    height: var(--btn-size);
    bottom: 0;
    right: 0;
    background-color: var(--red-color);
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

#practical-case-container .btn img {
    height: var(--btn-arrow-height);
}
#practical-case-container .practical-case-item .btn img {
    transition: transform 0.4s ease-in-out;
}

#practical-case-container .hidden-content {
    padding: 10px;
    border: 5px solid var(--red-color);
	border-top: none;
    display: none;
}

#practical-case-container #column-1 .practical-case-item:nth-child(even) .hidden-content,
#practical-case-container #column-2 .practical-case-item:nth-child(odd) .hidden-content{
	border: 5px solid var(--gray-color);
	border-top: none;
}

#practical-case-container .open .hidden-content {
    display: block;
	width: 100%;
}

#practical-case-container .open .btn {
    background-color: var(--gray-color);
}

#practical-case-container #column-1 .practical-case-item:nth-child(even) .title-wrapper,
#practical-case-container #column-1 .practical-case-item:nth-child(even) .btn,
#practical-case-container #column-2 .practical-case-item:nth-child(odd) .title-wrapper,
#practical-case-container #column-2 .practical-case-item:nth-child(odd) .btn{
    background-color: var(--gray-color);
}

@media screen and (max-width: 768px) {
    #practical-case-container {
        flex-direction: column;
    }
	
	#practical-case-container #column-1,
	#practical-case-container #column-2 {
		width:100%;
	}

    #practical-case-container .btn {
        bottom: 0;
        right: 0;
    }
}